ReactJS中使用Bootstrap Grid卡片时如何map遍历图片src数组？

• 尝试生成6张搭载不同图片的卡片，一直没掌握数组map遍历的正确实现方法
• 当前代码运行无任何报错，页面也没有显示损坏的缩略图占位标识，但卡片始终无法加载展示数组中存储的对应图片
• 相关实现代码截图：
  

按优先级挨个排查以下问题即可，90%的同类问题都是这几个原因导致的：

1. 检查map遍历的返回值 #

没有坏图占位首先要排查是不是根本没渲染出img标签，绝大多数人写map的时候会犯箭头函数返回值的错误：

// 错误写法：箭头函数用大括号包裹逻辑时漏写return，遍历结果全是undefined，不会渲染任何内容
const cardElements = imgList.map(item => {
  <div class="card">
    <img src={item.src} />
  </div>
})

// 正确写法1：大括号内显式return JSX
const cardElements = imgList.map((item, idx) => {
  // 列表渲染必须加唯一key，不然会出现渲染异常
  return <div class="card" key={idx}>
    <img src={item.src} alt={item.name} />
  </div>
})

// 正确写法2：箭头函数直接用小括号包裹JSX，触发隐式返回
const cardElements = imgList.map((item, idx) => (
  <div class="card" key={idx}>
    <img src={item.src} alt={item.name} />
  </div>
))

2. 检查图片路径的引用规则 #

如果DOM里已经能看到img标签，但是图片加载不出来，基本是本地图片的引用方式不符合框架打包规则：

• 用React/Vue/Vite等工程化脚手架搭建的项目，直接在数组里写本地图片的相对字符串路径，不会被打包工具识别，最终解析的src地址是错的
• 本地图片正确引用方式二选一：
  • 先通过import把图片引入为变量，再把变量存入数组

  import img1 from './assets/pic1.jpg'
  import img2 from './assets/pic2.jpg'
  // 其余4张图同理引入
  const imgList = [
    {src: img1, name: '卡片1'},
    {src: img2, name: '卡片2'},
    // 其余数组项同理配置
  ]
  

  • 用URL构造方法动态获取图片打包后的真实地址（Vite原生支持）

  const imgList = [
    {src: new URL('./assets/pic1.jpg', import.meta.url).href, name: '卡片1'},
    // 其余数组项同理配置
  ]
  

• 如果是存放在CDN的网络图片，确保src里的地址是带http/https协议头的完整地址，不要漏写协议导致路径解析错误。

3. 检查元素样式 #

如果DOM里有img标签，复制src地址在新标签页能正常打开图片，就排查CSS：看是不是卡片、img标签被设置了display: none、宽高为0、透明度为0、z-index被其他元素遮挡这类问题，导致内容已经渲染但视觉上看不到。

快速排查技巧：按F12打开浏览器开发者工具，在元素面板找有没有生成对应的6个img标签：

• 没有标签：就是map返回值写错了
• 有标签但src地址不对：就是图片引用方式错了
• 有标签src地址也能正常打开图：就是样式问题

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