如何通过 React 在此地图功能代码中插入图像？答案

【问题标题】：How can I insert an image in this map function code by React?如何通过 React 在此地图功能代码中插入图像？
【发布时间】：2022-09-30 22:40:13
【问题描述】：

我正在使用地图功能构建图像框，但不知道如何连接两个文件。它不显示图像，它只显示图像的方向。

import React from \"react\";
import \"../navi.css\"

function NaviIcon (props) {
  return (
    <div id=\"NaviIcon\">
      <span>{props.image}</span>
    </div>
  );
}

export default NaviIcon;

我将此文件导入到以下文件

import React from \"react\";
import NaviIcon from \"./NaviIcon\";
import \"../navi.css\";

const image = [
  {
   image : \"./images/shopping-cart.png\"
  },
  {
    image : \'./images/bell.png\'
  },
  {
    image : \'./images/user.png\'
  },
];

function NaviIconList (props) {
  return (
    <div id=\"NaviIconList\">
      {image.map((image) => {
        return (
          <NaviIcon image={image.image} />
        );
      })}
    </div>
  );
}

export default NaviIconList;

如果数组的项目不是图像，它会很好地工作。

标签： javascript reactjs

【解决方案1】：

您需要将span 替换为img 标签：

由此：

 <span>{props.image}</span>

对此：

 <img src={props.image} />

【讨论】：

【解决方案2】：

在NaviIcon 中使用<img> 标签。

<img src={props.image}/>

【讨论】：