用JSON图像路径响应组件
用JSON图像路径响应组件
提问于 2018-05-01 10:44:59
我有一个react组件，它从本地json文件中提取一些数据。这些数据与图像有一些联系。然而，即使路径是正确的，图像也没有加载。我之前使用的是require，但在不同的代码设置中使用。既然我已经把它转换成这个，图像就不会加载了。我使用webpack 4，所以我想我需要再次要求图像？在下面的声明中，我如何做到这一点？
失败的部分是“image={release.imageURL}”，它正在传递给组件的“src”。
import React from "react";
import ReactDOM from "react-dom";
import Release from "./release.js"
import data from "../data/releases.json"
const allReleases = data.map(release => {
return (
<div className="column-2">
<Release
key={release.id}
url={release.releaseURL}
image={release.imageURL}
cta={release.cta}
title={release.title}
artists={release.artists}
/>
</div>
)
})
const Releases = () => {
return (
<div>
<div className="row">
<h3>All Releases</h3>
{allReleases}
</div>
</div>
)
}出口违约释放；
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-05-01 13:44:37
在不知道你想要实现什么的细节的情况下，我认为你可以做以下几件事：
因为您在json中提供了路径，所以需要动态地要求它们。
releases.json
[
{
imageURL: "/image01.jpg"
},
{
imageURL: "/image02.jpg"
},
{
imageURL: "/image03.jpg"
}
]然后，假设您知道这些图像的相对路径，您可以在地图中要求它们。
const allReleases = data.map(release => {
return (
<div className="column-2">
<Release
url={require('./path/to/images' + release.imageURL)}
/>
</div>
)
})或者，您可以使您的releases.json成为一个js文件，并在那里导入您的图像，并将它们作为变量放在数据中。
Stack Overflow用户
发布于 2022-02-07 11:21:06
兄弟，我一直在努力解决这个问题，最终解决了这个问题：
1-您所要做的就是从JSON文件中更改图像的路径。这意味着路径应该与您的react组件(allReleases)相关。
下一件事，而不是用
*
<Release
key={release.id}
url={release.releaseURL}
image={release.imageURL} // ==> WRONG
cta={release.cta}
title={release.title}
artists={release.artists}
/>-
只需：
*
<Release
key={release.id}
url={release.releaseURL}
image={`${release.imageURL}`} // ===> CORRECT
cta={release.cta}
title={release.title}
artists={release.artists}
/>-
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50115140
复制相关文章
相似问题
腾讯云开发者
