javascript - 从 JSON 文件到 React JS 文件的图像不显示

Question

我有一个包含图像源的 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”

Answer 1

我假设您自己设置了 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
      },
    },
  ],
},