React中如何在map函数代码中插入图片？组件图片不显示求助

问题核心是NaviIcon组件用<span>渲染图片路径，这只会输出文本字符串，要展示图片必须使用<img>标签，同时还要注意路径正确性和map循环的key属性。

1. 修改NaviIcon组件 #

将原来的<span>替换为<img>标签，设置src和alt属性：

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

function NaviIcon(props) {
  return (
    <div id="NaviIcon">
      <img src={props.image} alt="导航图标" />
    </div>
  );
}

export default NaviIcon;

2. 优化NaviIconList组件 #

• 给数组项添加唯一id，用于map循环的key属性（避免React警告）
• 确保图片路径正确：
  • 若图片放在public/images目录下，路径改为/images/shopping-cart.png（去掉开头的./）
  • 若图片放在src/images目录下，需先导入图片再使用

修改后的NaviIconList代码：

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

// 添加id作为唯一标识，同时确认路径正确性
const imageList = [
  { id: 1, image: "/images/shopping-cart.png" },
  { id: 2, image: "/images/bell.png" },
  { id: 3, image: "/images/user.png" },
];

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

export default NaviIconList;

若图片放在src目录下的写法 #

如果图片存放在src/images，需要先导入再赋值：

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

// 导入src下的图片
import shoppingCart from "./images/shopping-cart.png";
import bell from "./images/bell.png";
import user from "./images/user.png";

const imageList = [
  { id: 1, image: shoppingCart },
  { id: 2, image: bell },
  { id: 3, image: user },
];

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

export default NaviIconList;

内容的提问来源于stack exchange，提问作者MontaKr