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-01 09:49:52Z

4

Try updating require to import statement.

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

to

import myImg from '../imagepath.jpg'

edited Jun 1, 2022 at 9:49

answered Oct 29, 2020 at 9:31

Shyam

1,4548 silver badges13 bronze badges

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

1 Comment

BraveEvidence Over a year ago

Thanks a lot. Is require deprecated in create-react-app v4?

yudhiesh · Accepted Answer · 2020-10-24 05:21:58Z

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, 2020 at 5:21

yudhiesh

6,8774 gold badges25 silver badges56 bronze badges

answered Oct 24, 2020 at 5:14

augustine

5384 silver badges15 bronze badges

1 Comment

BraveEvidence Over a year ago

I am not using NODE_PATH and not using Typescript. I am using JS

Diego Ruiz · Accepted Answer · 2021-03-22 15:35:13Z

0

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.

answered Mar 22, 2021 at 15:35

Diego Ruiz

3101 gold badge4 silver badges7 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related