我需要使用内联样式并传入图像文件的 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]
};
感谢您的帮助!
最佳答案
要解决您的问题,请将 url-loader
配置更新为:
{
test: /\.(gif|png|jpg|svg)(\?.*$|$)/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name: '[name].[ext]',
publicPath: 'images/'
},
},
],
},
关于css - 在 React 中使用 webpack 和 url-loader 加载内嵌图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51005637/