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;
`;

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

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

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;

您可以在项目的根目录中创建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} >

将使用来自bandles的abs网址。

您应该让background-image值中的函数返回一个字符串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})`};

导入映像并尝试以下命令

import YourImage from "../filepath"

    export const RecommendItem = styled.div`
    background: url(${YourImage?.src});  
    `;