React中如何循环渲染图片？循环渲染卡片时图片仅显示alt文本如何解决

问题原因及解决方案 #

1. 动态require返回值适配问题

webpack环境下（比如Create React App搭建的项目），require引入静态资源时如果开启了ES模块兼容，返回的是一个模块对象，真实的图片路径存在default属性下，你需要调整img的src写法：

src={require(`../images/${image}.jpg`).default}

2. 静态资源路径匹配校验

先确认两个路径匹配规则：

• 检查src/images文件夹下是否存在和配置name完全匹配的图片文件，包括文件名大小写、后缀名（确认是.jpg而非.jpeg/.png等其他格式）
• 路径层级校验：Featured.js存放在src/section目录下，../images/确实指向src/images目录，层级是正确的

3. 代码逻辑优化（避免后续多数据时出现重复渲染问题）

你当前的写法会让每张卡片都渲染所有的图片数组，后续如果有多个卡片配置时会出现图片重复，建议把图片生成逻辑合并到卡片渲染逻辑中，优化后的完整代码参考：

const Featured = () => {
  // 直接在渲染卡片时匹配对应图片，不需要单独提前生成images数组
  const card = featuredSection.map((beer, i) => {
    return (
      <div key={i}>
        <h1>{beer.title}</h1>
        <p>{beer.description}</p>
        <img
          key={beer.name}
          src={require(`../images/${beer.name}.jpg`).default}
          alt={`${beer.title} 图片`}
        />
      </div>
    );
  });

  return <>{card}</>;
}

备选方案：静态导入兜底

如果动态require始终无法解析，可以改为提前静态导入所有需要的图片，再关联到配置中：

// 开头先静态导入图片
import beerImage1 from '../images/beer-image-1.jpg';

// 渲染时直接使用导入的变量
<img src={beerImage1} alt="Beer picture" />

如果是使用Vite搭建的项目，不支持require语法，需要改用import.meta.glob或者静态导入的方式引入图片。

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