React中展示Buffer格式图片及map函数不渲染问题解决

箭头函数的两种写法返回逻辑不同，你之前的写法漏了返回值：

• 箭头函数不包裹花括号时是隐式返回语法：(params) => JSX，会直接把后面的JSX作为返回值，所以能正常渲染
• 箭头函数用花括号包裹时是完整函数体，必须手动写return返回要渲染的节点，你之前的代码计算完Base64字符串后没有return对应的<li>元素，map遍历没有生成可渲染的节点列表，所以页面无内容。

另外你的代码还有一个容易导致图片加载失败的小问题：data URI格式里多了多余空格，标准格式不能在data:后、逗号前加空格，否则部分浏览器无法识别资源类型。

<div className={newsStyle.container}>
  <ul>
    {newsItem.map((news) => {
      // 花括号内可正常声明变量、编写任意处理逻辑
      const imgUint8 = new Uint8Array(news?.img?.data?.data || []);
      const base64Str = btoa(String.fromCharCode(...imgUint8));
      // 显式return要渲染的JSX节点
      return (
        <li key={news._id}>
          <div className={newsStyle.index}>
            {/* 注意data URI严格遵循格式：data:[MIME类型];base64,[内容]，不要加多余空格 */}
            <img src={`data:image/png;base64,${base64Str}`} alt={news.title} />
            <p className={newsStyle.txt}>{news.title}</p>
          </div>
        </li>
      );
    })}
  </ul>
</div>

• 大体积图片兼容：如果图片Buffer超过几十KB，用展开运算符...传入String.fromCharCode可能触发栈溢出，可以改成循环拼接二进制字符串，稳定性更高：

const imgUint8 = new Uint8Array(news?.img?.data?.data || []);
let binaryStr = '';
for (let i = 0; i < imgUint8.length; i++) {
  binaryStr += String.fromCharCode(imgUint8[i]);
}
const base64Str = btoa(binaryStr);

• MIME类型适配：不要硬编码image/png，如果接口返回的图片有jpeg、webp等其他格式，优先用接口返回的content-type字段作为MIME类型，避免图片格式不匹配无法显示。
• 逻辑复用：如果多处需要把Buffer转base64图片地址，可以把转换逻辑抽成独立工具函数，减少重复代码。

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