Png image not showing in website used in react.js

Question

Png image is not showing in website while importing it in img src line of xml code inside react.js.

I used <img src={require ("../../../Assets/Home/footer-image.png").default} alt='error loading image'/> inside xml div in react.js and I was expecting that the image will show in my website. My location is also correct but I'm not getting the result and in website it's showing error loading image.

Answer 1

Try removing .default at the end of the require:

<img src={require ("../../../Assets/Home/footer-image.png")***.default***
} alt='error loading image'/>

Answer 2

I proffer two possible solutions:

1. Why don't you try importing the image at the top of the file then using the import name in the tag. e.g.

import MyImage from ../../../Assets/Home/footer-image.png;

<img src={MyImage} alt='error loading image'/>

2. Store your assets e.g. images, svg's within the public folder of the application then call the asset path directly within the image tag.

 <img src="%PUBLIC_URL%/footer-image.png" alt='error loading image'/>