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

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

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 }

如果尚未安装，请不要忘记安装 file-loader。

yarn add -D file-loader

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

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

<RecommendItem imgUrl={imgUrl} >

将使用来自 bandles 的 abs url。