为什么从后端获取图片转Blob后无法正常显示？

本文探讨了Spring Boot后端返回图片数据，Vue 3前端将其转换为Blob后无法正常显示的问题。后端使用Java返回byte[]数组，前端使用axios获取，但`response.data`类型却为String，导致生成的Blob大小为0，图片无法显示。问题可能源于数据类型不一致、`responseType`设置错误、Blob对象创建错误、网络代理或后端`inputStream.available()`方法使用不当。文章分析了这些原因，并提供了改进后端代码（使用循环读取InputStream），调整前端代码（将`responseType`设置为`blob`），以及检查网络配置和添加错误处理机制的解决方案，最终确保图片能够正确显示。

前后端图片传输与显示问题排查

本文分析一个前后端图片传输问题：后端(Spring Boot 3.2.2, Java 21)返回图片数据，前端(Vue 3)将其转换为Blob后无法正常显示。 问题涉及数据类型、请求头、Blob对象创建和网络代理等方面。

问题描述

用户从后端获取图片，前端代码尝试将后端返回的byte[]转换为Blob对象，但生成的Blob大小为0，图片无法显示。 后端代码能够成功获取图片资源。

后端代码 (Spring Boot):

public byte[] getimages(String url) throws IOException {
    try (FileInputStream inputStream = new FileInputStream(new File(filepath + url))) {
        byte[] bytes = new byte[inputStream.available()];
        inputStream.read(bytes, 0, inputStream.available());
        return bytes;
    }
}

前端代码 (Vue 3):

const config = {
    headers: {
        Authorization: `Bearer ${this.$store.getters.getToken}`,
        responseType: "arraybuffer",
        accept: "image/jpeg",
    },
};

send
    .get(`/images/avatars/${this.$store.getters.getAvatar}`, config)
    .then((response) => {
        console.log(response.data); // 类型为String，而非预期byte[]
        const uint8Array = new Uint8Array(response.data);
        console.log(uint8Array);
        const blob = new Blob([response.data], { type: "image/jpeg" });
        console.log(blob); // Blob大小为0
        const url = window.URL.createObjectURL(blob);
        this.avatarURL = url;
    });

用户尝试了多种方法，包括修改responseType、移除accept头，以及直接使用Uint8Array，均无效。 最终，通过直接将图片URL赋值给标签的src属性解决了显示问题，但问题根源仍未明确。 (之前失败是因为将:src误写为src，导致Dev Server代理失效。)

问题分析

问题可能由以下几个原因造成：

1. 数据类型不一致: 后端返回byte[]，但前端接收到的response.data类型为String。这表明数据在传输过程中发生了转换，导致数据丢失或损坏。

2. responseType设置: 使用arraybuffer可能导致数据被错误解析。尝试将responseType设置为blob，直接接收Blob对象。

3. Blob对象创建: new Blob([response.data], { type: "image/jpeg" }) 中的response.data可能不是正确的二进制数据格式，导致创建的Blob为空。

4. 网络代理: 虽然直接使用img标签的src属性解决了问题，但之前的Blob方法失效可能与网络代理或服务器配置有关。

5. 后端代码潜在问题: inputStream.available()可能无法准确获取流大小，导致byte[]数组大小不足，从而丢失数据。 建议使用循环读取流数据，直到读取完毕。

解决方案建议

1. 后端代码改进: 修改后端代码，使用循环读取InputStream，避免使用available()方法。 确保返回的是正确的byte[]数据。 例如：

public byte[] getimages(String url) throws IOException {
    try (FileInputStream inputStream = new FileInputStream(new File(filepath + url))) {
        ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
        byte[] buffer = new byte[4096]; // 使用缓冲区读取
        int len;
        while ((len = inputStream.read(buffer)) != -1) {
            byteArrayOutputStream.write(buffer, 0, len);
        }
        return byteArrayOutputStream.toByteArray();
    }
}

2. 前端代码调整: 将responseType设置为blob，直接接收Blob对象。 如果仍然有问题，则检查response.data的内容和类型。 可以使用console.log(response)查看完整的响应信息。

3. 检查网络配置: 确保前端请求能够正确地通过代理服务器访问后端。

4. 错误处理: 在前端代码中添加错误处理机制，以便捕获并处理潜在的网络错误或数据解析错误。

通过以上改进，可以有效地解决前后端图片传输问题，确保图片能够在前端正确显示。 即使直接使用img标签的src属性能解决显示问题，理解问题根源和改进代码仍然至关重要。

理论要掌握，实操不能落！以上关于《为什么从后端获取图片转Blob后无法正常显示？》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！