如何将来自 API 的图像数据转换为 url 以在 React Js 的 img 标签中使用

Question

我上传了一张图片。现在，我有一个下载 API，它给我这个图像作为数据。响应如下所示：

响应的头是这样的：

现在的问题是我想在网页上使用 img 标签或 React js 中的任何其他可能的方式显示此图像。将内容传递给 src attr 什么都不显示。有人有什么想法吗？有什么办法吗？

Answer 1

您应该能够使用 FileReader 将响应转换为可在 src 属性中使用的 base64 格式：

// Request was successful, get image blob
const blob = await response.blob()

// Convert the blob to base64
const reader = new FileReader()
reader.readAsDataURL(blob)

// Get the converted image and set it where needed
reader.onloadend = () => {
    const base64Image = reader.result
    // Set the image to the src of the image tag or setState as you need
}

Answer 2

除了上面的答案之外，这对我也有用：

const fetchImage = async () => {
fetch(apiUrl, {
  method: 'get',
  headers: new Headers({
    Authorization: `Bearer ${getCookie('accessToken')}`,
  }),
})
  .then((response) => response.blob())
  .then((myBlob) => {
    const objectURL = URL.createObjectURL(myBlob);
    setImageUrl(objectURL);
  });

};

如何将来自 API 的图像数据转换为 url 以在 React Js 的 img 标签中使用

How can I turn the data that is a image came from API to url to use in img tag in react Js

javascript

api

image

reactjs