首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >【vue】 接口返回的preview是张图片,前端如何渲染

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

作者头像
fruge365
发布2025-12-15 10:19:12
发布2025-12-15 10:19:12
1270
举报
接口返回的preview是张图片,前端如何渲染

问题

在这里插入图片描述
在这里插入图片描述

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

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

解决

第一种

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

代码语言:javascript
复制
<img src="https://xxx.xxx.xxx.com/img" alt="" width="100%" />
第二种

api.js中设置 responseType为blod

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

vue单文件的methods中

代码语言:javascript
复制
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中

代码语言:javascript
复制
<img :src="Tianqimg" alt="" width="100%" />

效果

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

在这里插入图片描述
在这里插入图片描述

最终图片显示在页面上

下班~

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-03-18,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 接口返回的preview是张图片,前端如何渲染
  • 问题
  • 解决
    • 第一种
    • 第二种
  • 效果
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档