Path to image from database in React.js

Question

I dont know how to correct load path to img in react. When I do it this way everything works fine.

<img src = {require('../Images/komputer5.jpg')} alt = "productImage"></img>

But when I try to load this path from JSON i have error:

Uncaught Error: Cannot find module '../Images/komputer5.jpg'

Path in JSON

"image": "../Images/komputer5.jpg"

I tried to do it this way, but it didnt work

<img src = {require(product.image)} alt = "productImage"></img>

Can someone told me how do I get it to work in?

Can you explain about your directory architecture that you are using right now? — Dulaj Ariyaratne
– Dulaj Ariyaratne, Commented Oct 26, 2022 at 16:56
Src -> Images || src -> components -> products (from here I want to upload a photo) — asdasdas
– asdasdas, Commented Oct 26, 2022 at 16:59

Sachila Ranawaka · Accepted Answer · 2022-10-26 16:57:06Z

2

change the json like this

"image": "komputer5.jpg"

then add the relative path

 require(`../Images/${product.image}`)

answered Oct 26, 2022 at 16:57

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1