接口返回的Preview是一张图片，但vue怎么渲染到页面呢？

Question

如图接口返回一张图片

打印是对象数据：

但怎么渲染到vue的DOM上呢？试过img标签不行，有没有知道的高手呢？

Answer 1

URL.createObjectURL(blob) 然后用得到的地址去给img的src赋值

上述可以得到一个 bloburl

你也可以绘制在canvas上面。然后拿base64

如果你的接口要不要request headers，那么你完全可以用img的src请求你的接口。

Answer 2

正常把接口地址放在src上就行了

Answer 3

const contentType = res.type;
let result = await this.fileReader(res);
// 把二进制流转成 Blob
const blob = new Blob([result], {type: contentType});
// 这个 url 是 src 里绑定的值
this.url = window.URL.createObjectURL(blob);

fileReader(data) {
    return new Promise((resolve, reject) => {
        let reader = new window.FileReader();
        reader.readAsArrayBuffer(data);
        reader.onload = function(e) {
            const result = e.target.result;
            resolve(result);
        };
        reader.onerror = function(e) {
            reject(e);
        };
    });
},