Updating to create-react-app v4 , not rendering images

Question

I just updated to create-react-app v4

So my updated dependencies looks as follows

"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.0",

I have deleted all my node_modules folder and reinstalled them again

I have included all my images in an images folder which is present in src folder of create-react-app. When i go back to react-scripts 3.4.4, my images are rendering properly but in v4.0.0 images are not rendered at all. I am using both png and svg in my app and both fail to render.

Edit: I have found that images in public folder seems to render without any issue. But i want the images used by my components in src folder which are still not rendering and placing images used by components in src folder is a good practice. Do I store Image assets in public or src in reactJS?

Shyam · Accepted Answer · 2022-06-01T09:49:52.563

4

Try updating require to import statement.

const myImg = require('../imagepath.jpg')

to

import myImg from '../imagepath.jpg'

edited Jun 01 '22 at 09:49

answered Oct 29 '20 at 09:31

Shyam

1,364
7
13

Thanks a lot. Is require deprecated in create-react-app v4? – BraveEvidence Oct 30 '20 at 06:26

score 0 · Answer 2 · edited Oct 24 '20 at 05:21

0

Are you using NODE_PATH?

There is a breaking change in v4.0.0.

Removed typescript flag and NODE_PATH support

We've removed the deprecated typescript flag when creating a new app. Use --template typescript instead. We've also dropped deprecated NODE_PATH flag as this has been replaced by setting the base path in jsconfig.json.

If you are using it, use jsconfig.json instead.

edited Oct 24 '20 at 05:21

yudhiesh

6,383
3
16
49

answered Oct 24 '20 at 05:14

augustine

538
4
15

1

I am not using NODE_PATH and not using Typescript. I am using JS – BraveEvidence Oct 24 '20 at 05:17

score 0 · Answer 3 · answered Mar 22 '21 at 15:35

Shyam's answer works when your image URL is static, however, if you want the URL to be created dynamically it won't work.

If that's the case you can use this answer from GitHub:

require("../../assets/images/others/"+loginBgImage)

loginBgImage can have different values (login-image.jpg, login-new-image.jpg)

this got fixed using require("../../assets/images/others/"+loginBgImage).default

The .default after the require does the trick.

Updating to create-react-app v4 , not rendering images

3 Answers3