获取后端返回的图形验证码

如果后端返回的直接就是一个图形,有以下几种方式展示

一、直接在img标签里面的src里面调用接口

html 复制代码
<img :src="dialogSrc" class="photo" alt="验证码图片" @click="changeDialog">
javascript 复制代码
let orgUrl = "/api/captcha"  //你的接口地址
let dialogSrc = ref(orgUrl); //为啥不直接用orgUrl,是因为下面那个方法加上一个随机数
//点击图片刷新验证码
const changeDialog = () => {
    dialogSrc.value = `${orgUrl}?${Math.random()}`
}

二、把二进制流转换为图片

html 复制代码
  <img
   id="kaptcha_img"
   src=""
   alt="验证码图片"
   class="photo"
   @click="getKaptcha"
   />
javascript 复制代码
   getKaptcha().then((res) => {  //接口地址返回
        let kaptcha_img = document.getElementById("kaptcha_img");
        let imageType = res.headers["content-type"];  //获取图片的格式
        const blob = new Blob([res.data], { type: imageType });
        const imageUrl = URL.createObjectURL(blob);
        kaptcha_img.src = imageUrl;
        kaptcha_img.onload = () => {
          URL.revokeObjectURL(imageUrl); //释放URL.createObjectURL()创建的对象
        };
      });
相关推荐
林十一npc14 分钟前
MySQL索引与视图综合应用示例解析
android·前端·mysql
机构师17 分钟前
<tauri><rust><GUI>基于rust和tauri,实现一个svg转png的工具
javascript·后端·rust
SuperherRo21 分钟前
Web开发-JavaEE应用&ORM框架&SQL预编译&JDBC&MyBatis&Hibernate&Maven
前端·sql·java-ee·maven·mybatis·jdbc·hibernate
这里有鱼汤22 分钟前
Python 图像处理必备的 15 个基本技能 🎨
前端·后端·python
这里有鱼汤22 分钟前
想学会Python自动化办公?这20个Excel表格操作脚本一定要掌握!
前端·后端·python
爱摄影的程序猿35 分钟前
Python Web 框架 django-vue3-admin快速入门 django后台管理
前端·python·django
洁洁!1 小时前
数据采集助力AI大模型训练
前端·人工智能·easyui
MaCa .BaKa1 小时前
25-智慧旅游系统(协同算法)三端
java·javascript·vue.js·spring boot·tomcat·maven·旅游
MiyueFE1 小时前
bpmn-js 源码篇9:Moddle - 对象格式的标准化定义库
前端·javascript
excel1 小时前
webpack 核心编译器 七 节
前端