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

Posted

技术标签:

【中文标题】尝试从 create-react-app 中的 .json 文件中读取图像【英文标题】:Trying to read images from .json file in create-react-app 【发布时间】:2018-11-28 20:36:15 【问题描述】:

我正在尝试将 .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/>

我的图像与我的组件在同一个文件夹(组件)中。我在这里做错了什么?感谢您的宝贵时间。

【问题讨论】:

你最后要关闭你的数组吗???? 是的。我只是给了一个sn-p。 【参考方案1】:

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

&lt;img className = "MainImage" src =bumper[0].productImage/&gt;

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

  
]

使用 .js 文件与使用 .json 文件有性能差异吗?

【讨论】:

不错的一个。遵循你的逻辑,让它为我工作【参考方案2】:

您是否尝试过在图片名称前加一个斜线 我想你可以在这里找到一些解决方案: Correct path for img on React.js

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

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

【讨论】:

以上是关于尝试从 create-react-app 中的 .json 文件中读取图像的主要内容,如果未能解决你的问题,请参考以下文章

来自 create-react-app 中 CSS 的公共文件夹中的参考文件

如何从默认的“rails new app”和“npx create-react-app”修复这些依赖问题?

使用create-react-app的其他HtmlWebpackPlugin()页面

无法安装 npx create-react-app@3.3.0 nucampsite

尝试使用 create-react-app 开玩笑地运行打字稿

尝试测试 create-react-app 项目时出现“ReferenceError:文档未定义”