Arrays 使用JSON映像路径响应组件

我有一个react组件，它从本地json文件中提取一些数据。这些数据与图像有一些链接。但是，即使路径正确，图像也不会加载。我以前使用过require，但使用了不同的代码设置。现在我已经将其转换为此，图像将不会加载。我正在使用Webpack4，所以我猜我需要再次使用这些图像？在下面的陈述中，我该怎么做

失败的部分是正在传递给组件的“src”的“image={release.imageURL}”

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>
  )
}

从“React”导入React；
从“react dom”导入react dom；
从“/Release.js”导入版本
从“./data/releases.json”导入数据
const allReleases=data.map（release=>{
返回(
)
})
常量释放=（）=>{
返回(
所有版本
{allReleases}
)
}

---

导出默认释放

在不知道你想要实现的目标的细节的情况下，我认为你可以做以下几点：

因为您在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>
  )
})

const allReleases=data.map（release=>{
返回(
)
})

---

或者，您可以将

releases.json

制作成

js

文件，并将图像导入其中，并将其作为变量放入数据中。

图像是否引用到本地文件系统或URL？如果它们是本地的，您需要它们，否则您应该能够将字符串传递到

src

属性。是的，它们是文件系统的本地，因此需要它们。只是不知道如何使用上面的语法做到这一点：（ja..我尝试了这个，我得到了一个：“关键依赖项：依赖项的请求是一个表达式”和一个“未捕获错误：找不到模块”/release/release001:”（好的！路径有问题！这很有效！谢谢你：D