接口返回的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%" />
效果
两种方法实现的效果都是一样的
最终图片显示在页面上
下班~