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