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.

are you closing your array at the end ???? – amdev Jun 19 '18 at 19:56 — amdev, Jun 19 '18 at 19:56
yes. I was just giving a snippet. – user9878643 Jun 19 '18 at 20:00 — user9878643, Jun 19 '18 at 20:00

score 4 · Answer 1 · answered Jun 19 '18 at 20:42

4

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?

answered Jun 19 '18 at 20:42

user9878643

308
4
15

1

Nice one. Followed your logic and got it working for me – Tobe_Sta Oct 22 '18 at 01:21

score 0 · Answer 2 · answered Jun 19 '18 at 19:54

0

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)}/>

answered Jun 19 '18 at 19:54

Yevgeny Kolesnik

64
2

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

2 Answers2