When styling with an inline style and passing in the URL of an image file, I typically do it as shown below:
let url = `url(${this.state.logo})`
var cardStyle = {
backgroundImage: url,
backgroundSize: '200px 50px',
backgroundRepeat: 'no-repeat'
}
To use this style in a div element, simply include it like so:
<div className='work-card' style={cardStyle}></div>
The URL is usually passed as a property such as '../images/logos/ciena.png', which represents the relative path to the image from the component.
However, when running the app using webpack, a 404 error is encountered for the image. The error message appears as follows:
http://localhost:8080/images/logos/ciena.png 404 (Not Found)I have been successfully loading images using url-loader in scss files, but encountering issues when using it inline. Can anyone provide guidance on how to resolve this issue?
Below is my Webpack configuration:
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]
};
Your assistance is greatly appreciated!