Javascript 连接本地路径+；来自Map-React.Js的动态图像

我正在尝试使用React.Js从本地

data.json

文件中创建CardList项

要加载数据，我正在使用映射函数：

const ItemsList = data.map(item=>{

  return(
  <li><img key={item.id} src={"assets/images/sampleImages/" + item.image}/></li>
  )
})

const ItemsList=data.map（item=>{
返回(

)
})

但我无法得到图像。没有错误，只是出现了一个损坏的图像图标

我试过：

URL可以使用，但路径不能使用

。什么都不管用

第一步：

导入图像并将其存储在一个变量中（例如img）

第二步：

将图像作为src注入

<img src = { ExampleImg } />

---

首先像这样导入图像（您可以相应地修改它）

然后在您的项目列表中使用以下内容：

const ItemsList = data.map( item => {
  return(
  <li><img key={item.id} alt="TitleOfImage" src={`${imageBaseURL}${item.image}`}/></li>
  )
})

const ItemsList=data.map（item=>{
返回(

)
})

您尝试过“要求”吗？它应该是这样的：src={require（'./assets/images/sampleImages/${item.image}'）}你能发布你的JSON数据吗？我不能将它存储在一个变量中，因为它的路径是静态的，名称.jpg会随着图像的变化而变化。也许有两个变量？

import imageBaseURL = "./assets/images/sampleImages/";

const ItemsList = data.map( item => {
  return(
  <li><img key={item.id} alt="TitleOfImage" src={`${imageBaseURL}${item.image}`}/></li>
  )
})