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

文章目录

    • 问题
    • 解决
      • 第一种
      • 第二种
    • 效果

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

问题

接口返回的preview是张图片,前端如何渲染_第1张图片
可以看到这里接口返回的preview是一张图片,response里什么也没有

前端(vue2)如何将图片渲染到页面上呢?

解决

第一种

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


第二种

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中


效果

两种方法实现的效果都是一样的
接口返回的preview是张图片,前端如何渲染_第2张图片
最终图片显示在页面上

下班~

你可能感兴趣的:(vue2,前端,javascript,vue.js)