从Map-React.Js连接本地路径+动态图像

Question

我正在尝试使用React.Js从本地data.json文件中创建CardList项目。

要使用地图功能加载数据：

const ItemsList = data.map(item=>{

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

Code - PasteBin

但我无法获得图像。没有错误，只显示损坏的图像图标。

我试过了：

This solution并且URL有效，但不适用于路径。

Also this thread。没有任何作用。

Answer 1

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

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

然后在你的ItemList内部使用Template Literals，如下所示：

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

Answer 2

第一步：

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

import ExampleImg from '../example.png';

第二步：

将图像注入src

<img src = { ExampleImg } />