How to properly refer an image from a folder in React

so my app.js is in src folder, and I am trying to access an image in the src/images folder.
I am trying with:

<div><ImgMediaCard name='../images/image.png'/></div>

but it is not working, it will only work if I place the image in the same folder as app.js

<div><ImgMediaCard name='../image.png'/></div>

27 thoughts on “How to properly refer an image from a folder in React”

  1. Did you using create-react app?

    you can put your images folder inside public folder

    //-publc
    // -images
    //  -image.png
    
    <div><ImgMediaCard name='/images/image.png'/></div>
    
    Reply
  2. if your image doesn’t have in the public folder so you need to import

    import myImage from '../images/image.png';
    
    <div><ImgMediaCard name={myImage}/></div>
    
    
    Reply

Leave a Comment