How to use images in css with Webpack
I was stuck with similar issue and found that you can use url-loader
to resolve "url()"
statements in your CSS as any other require or import statements.
To install it:
npm install url-loader --save-dev
It will install the loader that can convert resolved paths as BASE64 strings.
In your webpack config file use url-loader in loaders
{
test: /\.(png|jpg)$/,
loader: 'url-loader'
}
Also make sure that you are specifying your public path correctly and path of images you are trying to load.
user3737841
Updated on July 09, 2022Comments
-
user3737841 almost 2 years
I am making a React w/ Webpack setup and am struggling to do what seems like should be a simple task. I want webpack to include images, and minimize them like I with gulp but I can't figure it out. I just want to be able to link an image in my css like so:
/* ./src/img/background.jpg */ body { background: url('./img/background.jpg'); }
I have all of my css/js/img folders inside a src folder. Webpack outputs to a dist folder, but I can't figure out how to get images there.
Here is my webpack setup:
var path = require('path'); var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { devtool: 'cheap-eval-source-map', entry: [ 'webpack-dev-server/client?http://localhost:8080', 'webpack/hot/dev-server', './src/index.js' ], output: { path: path.join(__dirname, 'dist'), // publicPath: './dist', filename: 'bundle.js' }, plugins: [ new webpack.HotModuleReplacementPlugin(), new HtmlWebpackPlugin({ template: './src/index.html' }) ], module: { loaders: [{ exclude: /node_modules/, test: /\.js?$/, loader: 'babel' }, { test: /\.scss$/, loader: 'style!css!sass' }, { test: /\.(png|jpg)$/, loader: 'file-loader' }] }, devServer: { historyApiFallback: true, contentBase: './dist', hot: true } };
-
user3737841 over 8 yearsWell my webpack-dev server serves from /dist and my images are in /src so do you know how I would reference the images in my .css file? Are the images supposed to be rolled up with my bundle.js? I'm just not sure how to get them to /dist since the /dist folder is just a virtual one served from webpack-dev-server
-
Alex Klibisz over 8 years@user3737841 You should be able to
require
the images in your stylesheets. For example,background-image: url('../assets/img/logo-dark.png')
. You will just have to try/adjust to get the path correct. -
VariableContent about 8 yearsIs it possible to achieve the same end result without inlining images? Ideally, images should just be copied to the dist folder preserving the same relative path. Is this possible?
-
Skay almost 8 years@VariableContent yes, just use file-loader. Images will be copied into output folder.
-
SMSk about 7 years@VariableContent btw url-loader has an option
limit
and if the image is larger than limit it will resolve it to url rather than base64 string -
Abhishek almost 7 yearsYou can use file-loader
{test: /\.(png|jpg)$/, loader: 'file-loader', }
-
Green about 6 years@WitVault,
file-loader
vsurl-loader
? Which one should followed by other in webpack.config? -
WitVault about 6 years@Green first use url-loader then file-loader should be used as fallback
-
Shubham Bhewanewala almost 6 yearswhat should i put in the url, a relative address or complete one?
-
Shubham Bhewanewala almost 6 yearswhat should be the location of image in project directory?
-
steffcarrington over 5 yearsThank you for this! Helped me out massively!
-
BBaysinger over 4 yearsThere aren't any examples of how to import this into css. I need to use require? In CSS? How does that look, and what is the path relative to?
-
Anoop D over 3 yearsIsn't it possible to replace file-loader with asset modules in webpack5 ? I tried as it is being said in docs , but couldn't succeed .
-
GalAbra almost 3 yearsThe OP specifically explained that this doesn't work for them