使用webpack和url-loader在React中加载内联图像

Question

我需要使用内联样式并传递一个图片文件的 URL。我是这样做的：

let url = `url(${this.state.logo})`
        var cardStyle = {
            backgroundImage: url,
            backgroundSize: '200px 50px',
            backgroundRepeat: 'no-repeat'
        }

然后在 div 中使用它，如下所示：

<div className='work-card' style={cardStyle}></div>

网址将是类似于'../images/logos/ciena.png'的属性，这是相对于组件的图像路径。

然而，当我使用webpack运行应用程序时，图片会出现404错误。错误信息如下：http://localhost:8080/images/logos/ciena.png 404(未找到)

我正在使用url-loader加载图像，并且在使用scss文件中的图像时它可以正常工作，但是在内联中它不起作用，我不知道该如何解决。

我的Webpack配置：

const HtmlWebPackPlugin = require("html-webpack-plugin");

const htmlWebpackPlugin = new HtmlWebPackPlugin({template: "./src/index.html", filename: "./index.html"});

module.exports = {
    output: {
        publicPath: "/"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            }, { // regular scss files to css
                test: /\.scss$/,
                loader: 'style-loader!css-loader!sass-loader'
            }, {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loader: 'url-loader',
                options: {
                    limit: 8000, // Convert images < 8kb to base64 strings
                    name: 'images/[name].[ext]'
                }
            }, {
                test: /\.(pdf|docx)$/,
                loader: 'file-loader?name=documents/[name].[ext]',
            }
        ]
    },
    devServer: {
        historyApiFallback: true
    },
    plugins: [htmlWebpackPlugin]
};

感谢您的帮助！

- ZarifS

Answer 1

为了解决您的问题，请将url-loader配置更新为以下内容：

{
  test: /\.(gif|png|jpg|svg)(\?.*$|$)/,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 8192,
        name: '[name].[ext]',
        publicPath: 'images/'
      },
    },
  ],
},

- Soroush Chehresa