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

代码 - PasteBin

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

我试过：

此解决方案并使用 URL 有效，但不适用于路径。

还有这个线程。 没有任何效果。

Answer 1

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

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

然后在你的 ItemList 中使用这样的模板文字：

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