图片流解析为图片资源

背景

项目中需要通过接口获取图片资源，后端给定的是图片流而非是url路径,所以要对图片有一定的处理。

问题

1. 通过文件名称请求成功了，接口也返回数据流。但是获取不到图片流。
2. 本地图片转为url路径形式

处理

远程图片转为Blob URL

    // 接口请求
    const getImageByName = ({name}) => {
    return request({
        url: '/api/getImage/${name}',
        method: 'POST',
        data: params,
        responseType: 'blob' // 这个是重点，问题一导致原因
    });
};

 // 图片流转换为 Blob URL
 const blobToImage = (blobData) => {
    // 通过 Blob 创建一个临时的图片 URL
    const imageUrl = URL.createObjectURL(blobData);
    return imageUrl;
};

本地图片转为Blob URL

实际上和上面没啥区别, 区别在于请求方式，一个是使用封装的请求方式，一个是使用原生的请求方式Fetch

// 本地图片路径
import picUrl from './assets/image.png';

const localImageToBlob = async (picPath) => {
    try {
        const response = await fetch(picPath);
        const blob = await response.blob();
        const url = URL.createObjectURL(blob);
        return url;
    } catch (error) {
        // 
    }
};

localImageToBlob(picUrl)