How to properly refer an image from a folder in React

Question

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>

Does this answer your question? [How do I reference a local image in React?](https://stackoverflow.com/questions/39999367/how-do-i-reference-a-local-image-in-react) — lissettdm, Feb 18 '21 at 15:54
@lissettdm it really doesnt, I tried checking a lot of threads before and nothing worked — kevvvvv, Feb 18 '21 at 16:01
Apparently I can only refer to files in public folder, so I had to place the image there and it appeared. not sure why — kevvvvv, Feb 18 '21 at 16:10

score 0 · Answer 1 · answered Feb 18 '21 at 16:26

0

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>

answered Feb 18 '21 at 16:26

Jethro91

score 0 · Answer 2 · answered Feb 18 '21 at 16:54

0

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>

answered Feb 18 '21 at 16:54

Md.Usman Ansari

2 Answers2