Reactjs cannot load images from json

Viewed 28

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: enter image description here json file: enter image description here

OUTPUT: enter image description here

1 Answers

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

Related