Serving static images with Webpack

Question

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

This is my currenct folder structure

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

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

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

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

I forgot to mention that in my src/server/server.js I am using express and serving static content like so // Serve static content for the app from the assets directory and build directory app.use(express.static('build')); app.use(express.static('assets')); — jonjonson
– jonjonson, Commented Mar 20, 2017 at 9:08
Are they in a relative path to the outputted Main.js? Otherwise it clearly wouldn't work. You can have them in your source and build with with Webpack, if you test for .jpg. I do something like: { test: /\.(ttf|otf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?|(jpg|gif)$/, loader: 'file-loader?name=./static/fonts/[name].[ext]' } — cbll
– cbll, Commented Mar 20, 2017 at 9:08
Yes they are like so <script defer src="${ assets ? assets.main.js : '/main.js' }" ></script> — jonjonson
– jonjonson, Commented Mar 20, 2017 at 9:10
So something like const file = { test: /\.(woff2?|jpe?g|png|gif|ico)$/, use: 'file-loader?name=./assets/images/[name].[ext]' }; — jonjonson
– jonjonson, Commented Mar 20, 2017 at 9:11
Something along those lines, yes. Give it a shot and update your javascript to include the relative path of the outputted images and let me know. — cbll
– cbll, Commented Mar 20, 2017 at 9:13

Richard · Accepted Answer · 2019-09-20 14:33:22Z

2

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

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

edited Sep 20, 2019 at 14:33

answered Sep 18, 2019 at 16:51

Richard

577 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Paul T. Rawkeen · Accepted Answer · 2019-09-06 08:23:18Z

1

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.

edited Sep 6, 2019 at 8:23

Paul T. Rawkeen

4,1133 gold badges38 silver badges53 bronze badges

answered Mar 20, 2017 at 9:19

cbll

7,32929 gold badges83 silver badges125 bronze badges

16 Comments

jonjonson Over a year ago

This only works if I import the image. So if I remove for example import test from './test.jpg' then the other image src wont work. Do you know what might be the problem?

jonjonson Over a year ago

Yes but I want to be able to render from image path because I will get the image path through service. So it has to be like <img src="path/to/my/assets/images" />. This will be dynamic not hardcoded images

jonjonson Over a year ago

Because I will get data from service like user: {name: 'John Smith', imageUrl: 'path/to/my/assets/folder'} and there can be many users it will never be the same image of caurse. So I cant do like import thisUser from 'specific-path.jpg'; Do you understand or is my explanation not good enough?

jonjonson Over a year ago

Basically I want to be able to reference images with strings not imports

jonjonson Over a year ago

No no I have implemented that all. But as I said. The images will be there and the user data logic is already implemented. But the problem is that I cant serve images through my assets folder. So I cant do like <img src="assets/images/test.jpg" /> That is my only dilemma

|

Pedro Nunez · Accepted Answer · 2022-06-23 17:40:10Z

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"
}

Collectives™ on Stack Overflow

Serving static images with Webpack

3 Answers 3

Comments

16 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

16 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related