React遍历Base64图片数组仅渲染最后一项问题求助

架构老林

2026-8-9

问题与解决方案

问题描述

我的MongoDB文档中包含名为stackUsed的数组，该数组存储了转换为Base64格式的图片。我希望每个文档仅渲染数组中的最后一张图片，但当前使用的JSX代码会渲染数组内所有图片，同时我不确定img标签的src属性该如何正确设置。

解决方法

1. 直接获取数组最后一项

不需要遍历整个数组，直接通过数组索引或ES6方法获取最后一个元素：

传统方式：stackUsed[stackUsed.length - 1]（需确保数组不为空）
更简洁的ES6方式：stackUsed.at(-1)（支持现代浏览器，直接取倒数第一个元素）

2. 正确配置Base64图片的src

Base64格式的图片需要添加对应的数据URI前缀才能正常显示：

如果MongoDB中存储的Base64字符串未带前缀，需要在前面拼接格式声明，例如PNG格式：data:image/png;base64,，JPG格式则为data:image/jpeg;base64,
如果存储的Base64已经包含前缀，直接赋值给src即可

修改后的JSX代码

{/* 先判断数组是否有内容，避免空数组报错 */}
{stackUsed.length > 0 && (
  <ul>
    <li className="stackUsedimgList">
      <img
        {/* 假设图片是PNG格式且数据库中无前缀，若已有前缀则直接写src={stackUsed.at(-1)} */}
        src={`data:image/png;base64,${stackUsed.at(-1)}`}
        alt="对应使用的编程语言图标"
        className="stackUsedImg"
      />
    </li>
  </ul>
)}