我有一个包含图像源的 JSON 文件。我试图显示图像,但它似乎没有显示。我在控制台或浏览器中没有收到任何错误。
JSON 文件:
[
{
"PageLink": "/casestudy/text-healthcare",
"title": "text healthcare website",
"id": "text-healthcare",
"imgSrc": "../assets/work/text-hp.png",
"alt": "text healthcare",
"contentClass": "some text..."
},
{
"PageLink": "/casestudy/text2-healthcare",
"title": "text2 healthcare website",
"id": "text2-healthcare",
"imgSrc": "../assets/work/text2-hp.png",
"alt": "text2 healthcare",
"contentClass": "some text too..."
}
]
这里是我在 JS 文件中调用 JSON 数据的地方,其中 CaseStudyData
是我将 JSON 数据导入到 JS 文件中的方式:
<FeatureBlock pageLink={CaseStudyData[0].PageLink}
title={CaseStudyData[0].title}
id={CaseStudyData[0].id}
imgSrc={CaseStudyData[0].imgSrc}
alt={CaseStudyData[0].alt}
contentClass={CaseStudyData[0].contentClass} />
<FeatureBlock pageLink={CaseStudyData[1].PageLink}
title={CaseStudyData[1].title}
id={CaseStudyData[1].id}
imgSrc={CaseStudyData[1].imgSrc}
alt={CaseStudyData[1].alt}
contentClass={CaseStudyData[1].contentClass} />
除了图像之外,其他一切都加载得很好。它能够检索数据并显示它。我已经验证过图像的路径是正确的。
这是它在控制台中显示的路径,这是正确的路径,但图像没有显示。它说“http://localhost:3000/assets/work/text-hp.png”
最佳答案
我假设您自己设置了 webpack 配置?如果是这样,您将需要安装 url-loader
npm install -D url-loader
然后用这个更新你的 webpack 配置
{
test: /\.(gif|png|jpg|svg)(\?.*$|$)/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name: '[name].[ext]',
publicPath: 'assets/' // or whatever the path you're using for assets is
},
},
],
},
关于javascript - 从 JSON 文件到 React JS 文件的图像不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55249659/