4

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

Improve this question
5
  • 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')); 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]' } Commented Mar 20, 2017 at 9:08
  • Yes they are like so <script defer src="${ assets ? assets.main.js : '/main.js' }" ></script> 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]' }; 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. Commented Mar 20, 2017 at 9:13

3 Answers 3

Reset to default
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, }, }
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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.

Improve this answer

16 Comments

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?
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
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?
Basically I want to be able to reference images with strings not imports
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
|
0

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" }
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.