服务器在 axios 中发送原始图像，如何将其转换为 base64 或其他方式使用此图像

Question

从下面link，我得到一张图片。不幸的是，它在检查网络元素的预览选项卡中显示图像。但在 res.data 中它显示损坏的文本。我如何才能在 img 标签中使用此图像，例如 .我还在控制台和预览中 returns 向我分享了它

export const getProfilePhoto = async (userType) => {
    return await axios.get(`${API_URL}/staff/profile-photo`,{ headers : authHeader(userType) })
    .then((res) => {
        console.log(res.data)
    })
}

这是它在控制台中显示的内容

这是它在预览中显示的内容

非常期待一些建议和解决方案

对于任何错误，我深表歉意。

Answer 1

理想情况下，您可以找到一种无需额外 headers 即可访问此图像的方法，因此您可以让浏览器直接处理它：

<img src="{API_URL}/staff/profile-photo" />

如果您做不到，那么您将需要获取一个 blob 并创建一个 object URL。

fetch(
  `${API_URL}/staff/profile-photo`,
  {
    headers: authHeader(userType)
  }
).then(res => res.blob()).then((blob) => {
  img.src = URL.createObjectURL(blob);
});

服务器在 axios 中发送原始图像，如何将其转换为 base64 或其他方式使用此图像

Server send an raw image in axios, how to convert it to base64 or other way to use this image

javascript

base64

httpwebresponse

reactjs

axios