Require Image Not Working in ReactJS | Image Not Showing in React JS

While working with ReactJS, any JavaScript library or framework, package versioning good practices matter. Package upgrades affect projects. I used create-react-app to create ReactJS boilerplate. My ReactJS version is 17.0.1 and 'react-scripts' version is 4.0.3 in this video. You can use images in React JS by importing or by requiring images. I have got images folder with images in it. I recently noticed react require image not working for me.

React won't load local images in some cases while using require. Require image in react js won't work in some cases. There seem to be an issue with the webpack configuration or something with React not loading local images. We can resolve it by adding default after requiring image. Problem seems to be with current react-scripts version. And there is github issue reported for this as well. In this video I will show you how can you show image in react js by using require.

Learn how to add image in react js or add image in react js. React image is used with simple img tag in JSX but there are few things that are important in case of using image in react js or react images. Also learn how to import image in react js or display image in react js. Easy way to import image in react js. Fix broken image react js.

More Ways to Use Images in React JS

- 7 Ways to Use Images in React JS

- Multiple Images in One Import in React JS

- Easy Way to Use Images in React JS / No Import or Require

- Painless Images Import in React JS / One Import for Multiple Images in React JS

- Images from JSON file in React

- Display Icons / Images from JSON file in React JS

- ReactJS Playground

Thank You!
👍 LIKE VIDEO
👊 SUBSCRIBE
🔔 PRESS BELL ICON
✍️ COMMENT

#react #reactjs #debug #debugging #js #javascript #javascripttutorial #webstylepress #webdevelopment

[webstylepress]

To watch more related videos, please LIKE, SHARE & SUBSCRIBE! WebStylePress needs your support.

[webdevwiz]

This was great! ".default" fixed my problem. Thanks for taking the time to share it!

[redspace]

after 5 questions in the stack, you saved us !!

[aliakbar]

love you seriously im getting mad and i spend whole day to solve this <3

[Hexafless]

Thank you sooo much. It was a lifesaver. :)

[alukosamuel]

Omg thank you so much my, I had to put my course on a pause cos I had a hard time importing logo

[caiquecarvalho]

Nice tutorial, man! You saved me a LOT of time.

[SpiritofTruth-Global]

This video literally saved me from head

[ppscguru]

Excellent work bro. Thnk you so much. It solved my problem

[crabman]

What about if you are getting the image src from a data file, and you are trying to map through the data. this approach doesn't seem to work in this particular case :/

[hameddamirchi]

thank you so much, and thank you again because your ethical job (mentioning the reference)

[KingD]

when i copied the app.css in my project. It gave me this error-> ./src/App.css Any suggestions to fix this??

[dipayandeb]

You are just amazing. To the point video and a solution that actually works.

[a.s]

I was about to break something in my room, thank you

[Raul-sibn]

hey, thanks a lot!
And if you are mapping through an array with images locally stored?? the require().default notation won't work. Any other solution?

[squidux]

What fixed this for me was the tag. I put <image> instead of <img>. When I changed it to <img> it worked fine.

[codeurdell]

Hello I have images in a file and I can display them with the map method in colcal but I can't display them on github I did everything in wine I really need this

[shubhamshrivastava]

I've seen that this default works only when we specify the extension of the image. Also, this won't work when the path is first stored into some variable and then that path is passed into require().

Example: will work fine.

But,
let path = "./image.jpg";
let image = require(path).default; will not work

Any solution to this will help me a lot as I'm fetching the image from the database and creating a static string will not work in my case. :(

[kzar]

For some reason React is adding a hash code to my file's name. For example I have a background.png, when I use required('path').default I get back background.bf33332.png. Does anyone know why is this happening?