Question

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

2018-06-19

3046

javascript reactjs

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

"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

您是否尝试过在图像名称前面加一个斜线我认为您可以在这里找到一些解决方案： React.js 上 img 的正确路径

最快的方法是像这样使用 require：

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