React JSX中如何根据数组索引定义img标签的src参数？

你遇到的问题是因为不能通过字符串拼接的方式直接访问已导入的变量——leaf并不是一个字符串前缀，JavaScript没法识别这种“拼接变量名”的写法。下面给你两种简单可行的解决方案：

方法1：用数组存储图片资源 #

把所有导入的leaf图片按顺序存入数组，通过数组索引直接获取对应资源，这是最直观的方式：

import leaf1 from "../../assets/menu-clip/leafes/leaf1.png";
import leaf2 from "../../assets/menu-clip/leafes/leaf2.png";
import leaf3 from "../../assets/menu-clip/leafes/leaf3.png";
import leaf4 from "../../assets/menu-clip/leafes/leaf4.png";
import leaf5 from "../../assets/menu-clip/leafes/leaf5.png";

// 按顺序将图片存入数组
const leafImages = [leaf1, leaf2, leaf3, leaf4, leaf5];

export default function Menu(props) {
  const menuList = props.menu.menuList;
  return (
    <div className={styles.menuContainer}>
      <ul className={styles.list}>
        {menuList.map((m, i) => (
          <li className={styles.menuLi} key={i}>
            {m.name}
            {/* 用索引取图片，i%5避免menuList长度超过5时出现索引越界 */}
            <img 
              src={leafImages[i % leafImages.length]} 
              alt="menu lístok" 
              width="50"
            />
          </li>
        ))}
      </ul>
    </div>
  )
}

如果你的menuList长度肯定不会超过5，也可以直接写leafImages[i]，不用取模。

方法2：用对象映射图片资源 #

如果更习惯键值对的管理方式，也可以创建一个对象，把数字和对应的图片关联起来：

import leaf1 from "../../assets/menu-clip/leafes/leaf1.png";
import leaf2 from "../../assets/menu-clip/leafes/leaf2.png";
import leaf3 from "../../assets/menu-clip/leafes/leaf3.png";
import leaf4 from "../../assets/menu-clip/leafes/leaf4.png";
import leaf5 from "../../assets/menu-clip/leafes/leaf5.png";

// 创建键值对映射
const leafMap = {
  1: leaf1,
  2: leaf2,
  3: leaf3,
  4: leaf4,
  5: leaf5
};

export default function Menu(props) {
  const menuList = props.menu.menuList;
  return (
    <div className={styles.menuContainer}>
      <ul className={styles.list}>
        {menuList.map((m, i) => {
          // 计算当前对应的键，同样处理超出5的情况
          const currentKey = (i % 5) + 1;
          return (
            <li className={styles.menuLi} key={i}>
              {m.name}
              <img 
                src={leafMap[currentKey]} 
                alt="menu lístok" 
                width="50"
              />
            </li>
          )
        })}
      </ul>
    </div>
  )
}

两种方法都能完美解决你的问题，推荐第一种数组方式，代码更简洁直观。

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