Node.js+Azure环境下，如何正确展示API返回的JPEG缩略图？

你遇到的核心问题是没正确处理API返回的二进制数据——Azure Video Indexer的Get-Video-Thumbnail API返回的是原始JPEG字节流，不是字符串，直接把它当作UTF-8字符串处理必然会出现乱码。下面是具体的解决步骤和注意事项：

1. 先确保请求API时拿到正确的二进制数据 #

在Node.js里调用API时，默认会把响应解析为字符串，你需要手动配置请求库返回二进制格式：

用Axios的示例： #

const axios = require('axios');

async function fetchThumbnail() {
  const response = await axios.get('你的Get-Video-Thumbnail API地址', {
    responseType: 'arraybuffer' // 关键：指定响应为二进制数组
  });
  return response.data; // 这里返回的是Buffer/ArrayBuffer类型的原始二进制数据
}

用原生Fetch的示例： #

async function fetchThumbnail() {
  const response = await fetch('你的Get-Video-Thumbnail API地址');
  const arrayBuffer = await response.arrayBuffer();
  return Buffer.from(arrayBuffer); // Node.js环境下转成Buffer更易处理
}

2. 正确返回给前端的两种有效方式 #

方式一：直接返回二进制流（推荐） #

设置响应头为Content-Type: image/jpeg，把二进制数据直接发送给前端，不需要任何字符串转换：

// Express框架示例
app.get('/api/thumbnail', async (req, res) => {
  const thumbnailBuffer = await fetchThumbnail();
  res.setHeader('Content-Type', 'image/jpeg');
  res.send(thumbnailBuffer);
});

前端直接用<img src="/api/thumbnail"/>就能正常显示，浏览器会自动解析二进制流为图片。

方式二：转成Base64内联返回 #

如果需要把图片嵌入HTML标签里，要先把二进制数据转成Base64字符串，再构造data:image/jpeg;base64,xxx格式的src：

// Express框架示例
app.get('/api/thumbnail-html', async (req, res) => {
  const thumbnailBuffer = await fetchThumbnail();
  const base64Str = thumbnailBuffer.toString('base64');
  const imgHtml = `<img src="data:image/jpeg;base64,${base64Str}"/>`;
  res.setHeader('Content-Type', 'text/html; charset=utf-8');
  res.send(imgHtml);
});

这种方式适合小图片嵌入场景，但Base64会让数据体积增大约30%，大图片不建议用。

3. 避坑提醒 #

• 绝对不要把二进制数据用JSON.stringify或直接转成UTF-8字符串，这会彻底破坏字节结构，导致乱码无法恢复。
• 可以先把拿到的二进制数据写入本地文件验证：fs.writeFileSync('test.jpg', thumbnailBuffer)，如果能正常打开，说明API返回的是有效JPEG数据，问题出在后端返回逻辑。
• 如果用Fetch获取数据，记得在Node.js环境下把ArrayBuffer转成Buffer再处理，否则可能出现类型不兼容的问题。

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