Question

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

2019-03-19

1160

javascript arrays json reactjs

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