React set image src to a dynamic path

Question

So what I an trying to do is to read image-src from a JSON file. In the JSON file I have something like this:

{
   posts:[
           {"img": "../images/a.png"},
           {"img": "../images/b.png"},

           //and more... 
         ]

}

Then I am trying to use these paths as image src in react:

import data from '../posts.json';

<img src={require(data.posts[0].img)}/>

This does not work, I get this error: Error: Cannot find module ".". Is there a way I can make this work?

check this https://stackoverflow.com/questions/39686035/import-json-file-in-react — Marios Nikolaou, Jul 01 '18 at 10:19

score 0 · Answer 1 · answered Jul 01 '18 at 10:17

0

You shouldn’t use require there.

<img src={ data.posts[0].img }/>

answered Jul 01 '18 at 10:17

Ben West

I dont get any error with your solution, but the image does not show up. In the chrome debugger, I see that the path is written correctly, but no image is displayed, this has something to do with webpack. When using require with a static path it works, but not with dynamic path. – Sarmad S. Jul 01 '18 at 10:37

1 Answers1