尝试从create-react-app中的.json文件读取图像

Question

我正在尝试将图像从我的.json文件加载到组件中，但该图像未加载。

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

我的图像与我的组件位于同一文件夹（组件）中。我在这里做错了什么？感谢您的宝贵时间。

Answer 1

看起来我解决了我的问题，但是将我的.json文件变成了.js文件。

<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',

  }
]

使用.js文件与.json文件有什么性能差异？

Answer 2

您是否尝试过在图像名称前添加斜线 我认为您可以在此处找到一些解决方案： Correct path for img on React.js

可能最快的方法是使用require，例如：

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