Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Png image not showing in website used in react.js

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.

Tags:

2

Answers


  1. 0

    Did you tried removing .default at the end of the require ?
    <img src={require ("../../../Assets/Home/footer-image.png").default
    } alt=’error loading image’/>

    Login or Signup to reply.
  2. 0

    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'/>
    1. 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'/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search