使用 styled-component 更改背景图像

Question

我想动态改变背景图像，当我按照如下方式尝试时，它没有用，但是当我在 chrome 中打开 devtools 时，可以显示背景

<RecommendWrapper>
     <RecommendItem imgUrl="../../static/banner.png" >
     </RecommendItem>  
</RecommendWrapper>

export const RecommendItem = styled.div`
    width: 280px;
    height: 50px;
    background-size: contain;
    background: url(${(props)=>props.imgUrl});  
`;

如果我这样使用，它可以工作，但不能改变图像动态。

import banner from "../../statics/banner.png"
export const RecommendItem = styled.div`
    width: 280px;
    height: 50px;
    background-size: contain;
    background:url(${banner}); 
`;

如果我使用网络图像（url 喜欢“https://syean.cn/img/avatar.jpg”），它也可以工作

Answer 1

将您的文件移至 public 文件夹并尝试此命令：

<RecommendItem imgUrl={process.env.PUBLIC_URL + '/banner.png'} >

Answer 2

React、Gatsby 和 Next.js 通常都使用 Webpack，它会在部署之前编译您的网站。他们将缩小图像并更改每个图像的路径。

为了正确加载图像，您必须将它们作为导入动态引用。这样，变量 URL 在 Webpack 完成它的工作后仍然有效。

import styled from 'styled-components';
import img from './img/bg.gif';
    
const Content = styled.div`
  border: 1px solid #000;
  background-image: url(${img});
  width: 2000px;
  height: 2000px;
`;

Answer 3

import styled from 'styled-components';
// used as 
<Heading image={require('./images/headerBackground.jpg')} />

// a styled component
const Container = styled.div`` 
// the class made as
class Heading extends Component {
  render() {
    return (
      <Container image={this.props.backgroundimage}>
          <Logo />
          <Navigation />
          <HeadingBox />
      </Container>
    )
  }
}
export default Heading;

Answer 4

您可以在项目的根目录中创建 next.config.js 并添加此代码：

const webpack = (config, options) => {

  config.module.rules.push({
    test: /\.(png|jpe?g|gif)$/i,
    loader: 'file-loader',
    options: {
      // name: '[path][name].[ext]',

      name() {
        // `resourcePath` - `/absolute/path/to/file.js`
        // `resourceQuery` - `?foo=bar`

        if (process.env.NODE_ENV === 'development') {
          return '[path][name].[ext]';
        }

        return '[contenthash].[ext]';
      },
      publicPath: `/_next/static/images`,
      outputPath: 'static/images',
      limit: 1000,
    },
  });

  return config
}

module.exports = { webpack }

如果还没有安装，请不要忘记安装 file-loader。

yarn add -D file-loader

然后在你的组件中你可以这样做：

const imgUrl = require("../../static/banner.png").default;

<RecommendItem imgUrl={imgUrl} >

将使用手镯中的 abs url。

Answer 5

你应该让background-image中的函数值return一个字符串，url(your_image_link).

<RecommendWrapper>
     <RecommendItem imgUrl="img_link" >
     </RecommendItem>  
</RecommendWrapper>

export const RecommendItem = styled.div`
    width: 280px;
    height: 50px;
    background-size: contain;
    background: ${(props) => `url(${props.imgUrl})`};

使用 styled-component 更改背景图像

Change background image with styled-component

reactjs

styled-components