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/'
      },
    },
  ],
},

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

1 个答案: