IT技术 - 从 Map 连接本地路径 + 动态图像 - React.Js - 吾爱随笔录

IT技术 javascript json reactjs concatenation

2021-05-22 09:23:56

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

要加载数据，我正在使用地图功能：

const ItemsList = data.map(item=>{

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

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

我试过：

此解决方案与 URL 一起工作，但不适用于路径。

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

2个回答

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

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

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

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

第一步：

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

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

第二步：

将图像作为 src 注入

<img src = { ExampleImg } />

其它你可能感兴趣的问题