Can't render image from path in React

Question

I've saved images in an directory outside react project then I tried to render them in a react component but it fails.

// path: /frontend/src/components/Product.js
<img
    src='/uploads/image-1608360523657'
    style={{ width: 253, height: 208 }}
/>

check this ejecting solution https://stackoverflow.com/a/58863926/5990249 — sharun k k, Dec 19 '20 at 12:32

score 0 · Answer 1 · answered Dec 19 '20 at 09:06

0

Import image like component :

import fallImg from "../uploads/image-1608360523657.jpg";

answered Dec 19 '20 at 09:06

b3hr4d

I can't do this because the uploads folder located outside react project folder because it's a static folder to the backend. – A.Usama Dec 19 '20 at 09:11
then u should bring the internet url from API or somewhere. – b3hr4d Dec 19 '20 at 09:49

score 0 · Answer 2 · answered Dec 19 '20 at 09:07

0

Import image first, then use specified name as a reference to the image

import someImageName from '/path/to/your/image/here'

<img
    src={someImageName}
    style={{ width: 253, height: 208 }}
/>

answered Dec 19 '20 at 09:07

Mile Mijatović

I can't do this because the uploads folder located outside react project folder because it's a static folder to the backend. – A.Usama Dec 19 '20 at 09:11

2 Answers2