尝试从 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 文件。
<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 文件有性能差异吗?
【讨论】:
不错的一个。遵循你的逻辑,让它为我工作【参考方案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