如何在React JS中渲染图片URL数组？map渲染仅出单张图如何解决

问题排查与解决方案 #

1. 补充唯一key属性（最常见诱因） #

React 渲染列表时要求每个列表项必须携带唯一的key属性，用于虚拟DOM的diff算法做节点对比更新，缺少key会导致渲染逻辑异常，大概率出现只渲染部分元素的问题。你可以直接用唯一性的图片URL作为key值，修改代码如下：

{
  array.map(e => (
    <img 
      key={e} 
      src={e} 
      alt="加载的图片"
      style={{display: 'block', margin: '12px 0'}} // 临时增加样式避免图片重叠
    />
  ))
}

2. 修正无效的图片链接 #

你给出的示例数组中第一个URL存在语法错误：后缀为.jpgtoken=，缺少了URL参数分隔符?，会直接导致这张图片加载失败。你可以先对数组内的所有URL做合法性校验和修正：

// 示例处理逻辑：批量修正缺少?的错误URL
const fixedImageArray = array.map(url => {
  if (url.includes('.jpgtoken=')) {
    return url.replace('.jpgtoken=', '.jpg?token=')
  }
  return url
})

3. 校验数组变量与长度 #

确认你渲染时使用的数组变量和实际数据源变量名一致：你示例中定义的数组变量是array，但渲染代码里用的是arr，如果没有提前做const arr = array的赋值操作，arr可能只有1条数据甚至为空。
你可以在渲染前打印数组长度确认数据是否正确：

console.log('待渲染的图片数组长度：', arr.length)

4. 排查CSS样式问题 #

如果打开浏览器控制台能看到所有img标签都已经被渲染到DOM树中，但页面只显示一张图片，大概率是图片样式设置了绝对定位、父元素固定宽高溢出隐藏等，导致所有图片重叠在一起，你可以给img临时加不同的边框、边距样式做区分，验证是否是样式导致的视觉异常。

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