如何展示API返回的图片原始数据？该数据格式是什么？

兄弟，我来给你捋捋这个问题哈！你遇到的情况其实很常见——返回图片的API本质上是给你发了二进制字节流，console.log出来的乱码/原始数据就是这些字节的直接展示，下面分两部分给你讲清楚：

一、这些原始数据的格式是什么？ #

API返回的图片原始数据，在浏览器里一般是以这几种形式存在：

• Blob：这是浏览器专门用来存储二进制数据的对象，你console.log的话会看到类似Blob {size: 12345, type: "image/png"}的内容，其中type字段会标明图片的MIME类型（比如png、jpeg）。
• ArrayBuffer/类型化数组：比如Uint8Array，这是更底层的二进制数据存储形式，console.log会显示一堆数字或者乱码，因为它是直接的字节序列。

你可以通过API响应的Content-Type头来确认图片的具体格式，比如用fetch的话：

fetch('你的API地址')
  .then(res => {
    console.log('图片类型:', res.headers.get('Content-Type')); // 输出类似image/png
    return res.blob();
  });

二、在页面展示这类数据的最优方法 #

推荐按优先级用下面几种方式：

1. 最简单直接：直接把API地址赋值给img的src #

这是最省心的方法，浏览器会自动处理所有二进制数据的解析和渲染，不需要你手动处理原始数据，就像你示例里写的那样：

const img = document.createElement('img');
img.src = '你的API地址';
// 加个加载失败的兜底处理更稳妥
img.onerror = () => {
  console.error('图片加载出错啦！');
};
document.body.appendChild(img);

2. 拿到原始二进制数据后，用URL.createObjectURL()转成可访问URL #

如果已经通过fetch/ajax拿到了Blob/ArrayBuffer格式的原始数据，用这个方法效率最高（比base64省内存）：

fetch('你的API地址')
  .then(response => {
    // 先确认响应成功
    if (!response.ok) throw new Error('请求失败');
    return response.blob(); // 把响应转成Blob格式
  })
  .then(blob => {
    const img = document.createElement('img');
    // 生成临时URL
    const imgUrl = URL.createObjectURL(blob);
    img.src = imgUrl;
    // 图片加载完成后记得释放临时URL，避免内存泄漏
    img.onload = () => URL.revokeObjectURL(imgUrl);
    document.body.appendChild(img);
  })
  .catch(err => console.error('获取图片失败:', err));

3. 转成Base64格式（适合小图片） #

这种方式会把二进制数据转成字符串，虽然兼容性好，但内存占用比上面的方法高，适合小尺寸图片：

fetch('你的API地址')
  .then(response => response.arrayBuffer())
  .then(buffer => {
    // 把ArrayBuffer转成Uint8Array，再转成Base64字符串
    const uint8Arr = new Uint8Array(buffer);
    const base64Str = btoa(String.fromCharCode(...uint8Arr));
    // 这里要注意替换成实际的图片MIME类型，比如image/jpeg
    const imgSrc = `data:image/png;base64,${base64Str}`;
    
    const img = document.createElement('img');
    img.src = imgSrc;
    document.body.appendChild(img);
  });

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