Reactjs cannot load images from json

Question

Apparently importing image url from json file doesn't work and gives such an output. But if i import them this way : {require("hardcoded url")} they work but if i use variables like in the image below the image doesn't load up or like : {require(project.image)} then the whole page goes to the background color.

react code: json file:

OUTPUT:

Answer 1

You can add require() to all image keys in your JSON file.

example :

change : "image": "images/personalewebsite.png",
to : "image": "require('images/personalewebsite.png')"

this is a demo in codesandbox