连接来自Map的本地路径+动态图像-React.Js [英] Concatenate local path + dynamic images from Map - React.Js

问题描述

我正在尝试使用React.Js从本地 data.json 文件处理CardList项目.

要使用地图功能加载数据，请执行以下操作:

  const ItemsList = data.map(item => {返回(< li>< img key = {item.id} src = {资产/图像/sampleImages/" + item.image}/</li>)}) 

解决方案

首先像这样导入图像(您可以相应地对其进行修改)

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

然后在ItemList中使用模板文字这样:

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

i'm trying to do a CardList items from a local data.json file using React.Js.

To load the data i'm using a map function:

const ItemsList = data.map(item=>{

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

Code - PasteBin

but i cannot get the image. No error, just a broken image icon appear.

I've try:

This solution And with URL works, but don't work with path.

Also this thread. And nothing works.

解决方案

Firstly import the image like this (You can amend it accordingly)

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

Then inside your ItemList make use of Template Literals like this :

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

这篇关于连接来自Map的本地路径+动态图像-React.Js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！