使用样式组件更改背景图片

Question

我想动态地更改backgroundImage，当我尝试按以下方式操作时，它不起作用，但是当我在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

将文件移动到公用文件夹中，然后尝试以下命令：

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

Answer 2

 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 }

如果尚未安装，请不要忘记安装文件加载器。

yarn add -D file-loader

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

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

<RecommendItem imgUrl={imgUrl} >

将使用bands中的abs网址。