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

【问题标题】：Concatenate local path + dynamic images from Map - React.Js连接来自 Map - React.Js 的本地路径 + 动态图像
【发布时间】：2018-02-15 11:16:00
【问题描述】：

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

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

const ItemsList = data.map(item=>{

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

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

我试过了：

This solution 与 URL 一起工作，但不与路径一起工作。

Also this thread。没有任何效果。

【问题讨论】：

你试过“require”吗？应该是这样的：src={require('./assets/images/sampleImages/${item.image}')}
您能发布您的 JSON 数据吗？

【解决方案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>
  )
})

【讨论】：

【解决方案2】：

第一步：

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

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

第二步：

将图像作为 src 注入

<img src = { ExampleImg } />

【讨论】：