在 JS/Vue.js 3 中显示来自 API 的图像

Question

我正在尝试显示通过 API 返回的图像，但没有成功。

在Postman中正常显示：

但是当我对返回的数据执行 console.log 时，会显示以下内容：

如何将其转换为 src 的有效字符串？

谢谢！

Answer 1

很可能在您的抓取中您正在尝试解析 json，而您应该解析为 blob。

fetch(url, options)
.then(res => res.blob())
.then(res => //do your thing here)
.catch(error => console.log(error))

Answer 2

由于我使用的是 Axios，因此有必要将 responseType 更改为 "blob":

try {
    const response = await api.post(
      url,
      {
        params
      },
      {
        responseType: "blob"
      }
    );

    return URL.createObjectURL(
      new Blob([response.data], { type: "image/png" })
    );
} catch (error) {
    console.error(error);
}

所以您所要做的就是在图像的 src 属性中包含 return。

在 JS/Vue.js 3 中显示来自 API 的图像

Display image from API in JS/Vue.js 3

javascript

api

postman

vue.js