Question

我有一个反应应用程序，我从API获取项目数据。

我将每个项目的数据映射到反应应用中的卡片。

this.props.item.map(item => {
      return <Card data={item.name} key={item.id}/>;

这很有效，但是我想为数组中的每个项添加一个相应的图像，我不确定将图像添加到现有地图的方法。

图像存储在公共文件夹中，无法通过API获取。我希望正确的图像与正确的数据相对应。

EG。 data =“flowers”key =“123”src =“../ images / flowers.jpg”

谢谢！

Answer 1

最初从公共文件夹中获取图像并将其添加到src内的某处，例如src / assets / images。然后，您将必须创建与每个数据值对应的对象。然后将值映射到图像名称。

var flower = require("../assets/images/flowers.jpg");
var cat =  require("../assets/images/cat.jpg");
var dog =  require("../assets/images/dog.jpg");
var dictionary={"flowers":flower, "cat":cat,"dog":dog}

现在，当您收到API的回复时，

您可以在卡组件内部使用

<img src={dictonary[props.name]}/>

Answer 2

您可以添加名为src的新道具，并将其与项目名称一起使用：

this.props.item.map(item => {
     return <Card data={item.name} key={item.id} src={`${item.name}.jpg`}/>;

Answer 3

您可以创建一个图像到item.id地图，在那里你可以找到你当地的图像。

示例：

const imageIdMapper = {
  1: require("./<path to image belongs to id one>),
  2: require("./<path to image belongs to id two>),
  ...
}

然后在你的地图中

this.props.item.map(item => {
      return <Card data={item.name} key={item.id} image={imageIdMapper[item.id]}/>;

React将图像添加到现有地图

3 个答案: