Question

我有一个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>
  )
}

导出默认版本;

Answer 1

在不知道您想要实现的细节的情况下，我认为您可以执行以下操作：

因为您在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文件，然后将图片导入其中，并将其作为变量存储在数据中。

使用JSON图像路径

1 个答案: