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

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

一、直接在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()创建的对象
        };
      });
相关推荐
小毛驴8509 分钟前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
誰能久伴不乏37 分钟前
Linux如何执行系统调用及高效执行系统调用:深入浅出的解析
java·服务器·前端
涔溪2 小时前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
今禾2 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite
你这个年龄怎么睡得着的2 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
我想说一句2 小时前
掘金移动端React开发实践:从布局到样式优化的完整指南
前端·react.js·前端框架
jqq6662 小时前
Vue3脚手架实现(九、渲染typescript配置)
前端
码间舞2 小时前
Zustand 与 useSyncExternalStore:现代 React 状态管理的极简之道
前端·react.js
Dream耀2 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
冰菓Neko2 小时前
HTML 常用标签速查表
前端·html