我需要使用内联样式并传递一个图片文件的 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]
};
感谢您的帮助!