如何在JavaScript中通过API调用显示返回的JPG图片？

问题分析 #

你当前的核心问题是未明确服务器返回的内容类型：

• 第一次用res.text()得到[img name].jpg，说明服务器返回的是图片文件名/相对路径，而非图片二进制数据；
• 改成res.blob()后生成无效URL，是因为把文本响应当成二进制处理，自然无法解析出有效图片资源。

解决方案 #

根据服务器返回的内容类型，分两种处理方式：

方式1：服务器返回图片文件名/相对路径 #

如果服务器返回的是类似xxx.jpg的文件名，需将其拼接成可访问的完整图片URL，再创建图片元素插入页面：

function arCall(url = '', data = {}) {
  fetch('/session/token')
    .then(res => res.text())
    .then(ARCSRFToken => {
      return fetch(url, {
        method: 'POST', 
        mode: 'cors', 
        headers: {
          'X-CSRF-Token': ARCSRFToken,
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(data) 
      });
    })
    .then(res => res.text())
    .then(imgFileName => {
      // 拼接完整图片URL，假设图片存放在服务器的/images目录下，可根据实际路径调整
      const imgUrl = `/images/${imgFileName}`;
      // 创建img元素
      const img = document.createElement('img');
      img.src = imgUrl;
      img.alt = '请求返回的图片';
      // 将图片插入页面（示例：插入到id为image-container的元素中，无则插入body末尾）
      const container = document.getElementById('image-container');
      (container || document.body).appendChild(img);
    })
    .catch(err => console.error('请求出错:', err));
}

arCall('<The URL>', { id: 100 });

方式2：服务器返回图片二进制数据 #

如果服务器应该直接返回图片二进制流，需调整请求头的Accept字段，并正确处理blob数据：

function arCall(url = '', data = {}) {
  fetch('/session/token')
    .then(res => res.text())
    .then(ARCSRFToken => {
      return fetch(url, {
        method: 'POST', 
        mode: 'cors', 
        headers: {
          'Accept': 'image/jpeg', // 明确告诉服务器要图片类型的响应
          'X-CSRF-Token': ARCSRFToken,
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(data) 
      });
    })
    .then(res => {
      if (!res.ok) throw new Error('请求失败');
      return res.blob();
    })
    .then(imageBlob => {
      const imageObjectURL = URL.createObjectURL(imageBlob);
      // 创建img元素并显示
      const img = document.createElement('img');
      img.src = imageObjectURL;
      img.alt = '请求返回的图片';
      document.body.appendChild(img);
      // 图片加载完成后释放URL资源，优化内存
      img.onload = () => URL.revokeObjectURL(imageObjectURL);
    })
    .catch(err => console.error('请求出错:', err));
}

arCall('<The URL>', { id: 100 });

关键注意点 #

• 确认服务器返回内容：用浏览器开发者工具「网络」面板查看POST请求的响应内容，判断是文本文件名还是二进制图片；
• 调整请求头：若要获取二进制图片，Accept必须设为image/jpeg（或image/*），不要使用text/html；
• 插入DOM：无论哪种方式，都需要手动创建img元素并添加到页面DOM中，才能在页面显示图片。

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