Serving static images with Webpack

All we need is an easy explanation of the problem, so here it is.

I am having trouble with webpack and react serving static images on webpack dev server.

This is my currenct folder structure

enter image description here

As you can see I have a assets folder witch holds all my images
This is my webpack entry and output configuration

enter image description here

Where client entry is source of my react project
CLIENT_ENTRY: path.join(process.cwd(), ‘src/client/index.jsx’)

Now here is my output in BASH when webpack has done its part
enter image description here

And here is where I am trying to load images from assets folder in root of the project

enter image description here

Only the import works witch is expected.

I have tried to change the output and public path like so in webpack
path: path.resolve(__dirname, ‘dist’),
publicPath: ‘/’,

path: path.resolve(__dirname, ‘dist/assets’),
publicPath: ‘/assets/’,

path: path.resolve(__dirname, ‘dist’),
publicPath: ‘/assets’,

path: path.resolve(__dirname, ‘dist’),
publicPath: ‘/assets/’,

etc.. etc..

If someone could help me that would be great

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

In your webpack.config.js, you will need to serve the assets folder as well.

{
  ...webpack,
  devServer: {
    contentBase: [__dirname + '/public', __dirname + '/assets'],
    ...webpack.devServer,
  },
}

Method 2

To follow the idea behind webpack you need to process assets from your source to your target.

Therefore, add your images to a relative path in your source (where your entry is, essentially) and add a loader for the images (and perhaps other things) as such:

{
    test: /\.(woff2?|jpe?g|png|gif|ico)$/, 
    use: 'file-loader?name=./assets/images/[name].[ext]'
}

Just update the relative path of the outputs to the assets/images and they should be able to load.

Method 3

This is a fix for React(18.1.0) and webpack (5.72.1)

This works for both importing inside a <img src=""/> and <img src={url}/> without having to import or require().

You must first tell Webpack to include images in your dist bundle, I used a file loader for this.

npm install file-loader --save-dev

Then you must set a rule inside your webpack.config.js

{
  test: /\.(gif|png|jpe?g)$/,
  loader: 'file-loader',
  options: {
      name: '[path][name].[ext]'
  }
},

The structure of my project is:

project-name/
├── public
│   └── index.html
│   └── assets/
│       └── images/
│           └── *.png
├── src/
│   └── components
│       └── filewhereineedtoimport.js
│
├── webpack.config.js
└── package.json

Importing in component

<img src="/assets/images/desired-image.png"/>

My start script inside package.json

"scripts": {
"start": "webpack-dev-server --mode development --open 
 --hot",
"build": "webpack --mode production"
}

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply