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
      },
    },
  ],
},

从JSON文件到React JS文件的图像未显示

1 个答案: