css - 在 React 中使用 webpack 和 url-loader 加载内嵌图片

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>

url 将是一个属性，如“../images/logos/ciena.png”，它是图像相对于组件的路径。

但是，当我使用 webpack 运行应用程序时，我在图像上收到 404。错误是这样出现的:http://localhost:8080/images/logos/ciena.png 404 (Not Found)

我正在使用 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]
};

感谢您的帮助!

Answer 1

要解决您的问题，请将 url-loader 配置更新为:

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