Trying to read images from .json file in create-react-app

Question

I am trying to load a image from my .json file into my component, but the image does not load.

Someone looks to have solved it, but I don't know what he is talking about in terms of "branching"

  "Bumper": [{ "id": 1, "productSquareId": "BumperStubby", "productImage": "bumper", "companyImage": "logo.png", "price": "$55.99" }, 

 const image1 = ProductInformation.Bumper[0].companyImage; <img className = "MainImage" src ={image1}/> 

My images is in the same folder(components) as my components. What am I doing wrong here? I appreciate your time.

Answer 1

It looks like I solved my question, but by making my .json file a .js file.

<img className = "MainImage" src ={bumper[0].productImage}/>

 export const bumper = [ { id: 1, productSquareId: 'BumperStubby', productImage: require('./bumper1.png'), companyImage: require('./logo.png'), price: '$55.99', } ] 

Is there any performance difference in using a .js file than a .json file?

Answer 2

Have you tried just putting a slash in front of the image name I think you can find a few solutions here: Correct path for img on React.js

The quickest one that may work is using require like so:

<img  className = "MainImage" src ={require(image1)}/>