【vue】 接口返回的preview是张图片，前端如何渲染

接口返回的preview是张图片，前端如何渲染

问题

可以看到这里接口返回的preview是一张图片，response里什么也没有

前端（vue2）如何将图片渲染到页面上呢？

解决

第一种

也是最简单的一种，直接将接口地址赋值给img标签的src

<img src="https://xxx.xxx.xxx.com/img" alt="" width="100%" />

第二种

api.js中设置 responseType为blod

export const Tqimg = () => {
  return request4({
    url: "/xxx/xx/xx",
    method: "get",
    // 加上下面这个
    responseType: "blob",
  });
};

vue单文件的methods中

async Tqimg() {
  await Tqimg().then((res) => {
    console.log(res);
    const myBlob = new window.Blob([res.data], { type: "image/jpeg" });
    // Tianqimg是提前定义好的模型
    this.Tianqimg = window.URL.createObjectURL(myBlob);
  });
},

vue单文件的template中

<img :src="Tianqimg" alt="" width="100%" />

效果

两种方法实现的效果都是一样的

最终图片显示在页面上

下班~