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

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

一、直接在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()创建的对象
        };
      });
相关推荐
Jinuss22 分钟前
Vue3源码reactivity响应式篇之computed计算属性
前端·vue3
落日沉溺于海22 分钟前
React From表单使用Formik和yup进行校验
开发语言·前端·javascript
知识分享小能手23 分钟前
React学习教程,从入门到精通, React 新创建组件语法知识点及案例代码(11)
前端·javascript·学习·react.js·架构·前端框架·react
会豪26 分钟前
工业仿真(simulation)--前端(五)--标尺,刻度尺
前端
会豪28 分钟前
工业仿真(simulation)--前端(四)--画布编辑(2)
前端
an__ya__30 分钟前
Vue数据响应式reactive
前端·javascript·vue.js
苦逼的搬砖工33 分钟前
Flutter UI Components:闲来无事,设计整理了这几年来使用的UI组件库
前端·flutter
想买Rolex和Supra的凯美瑞车主34 分钟前
Taro + Vite 开发中 fs.allow 配置问题分析与解决
前端
ruanCat36 分钟前
使用 vite 的 base 命令行参数来解决项目部署在 github page 的路径问题
前端·github
Codebee41 分钟前
使用Qoder 改造前端UI/UE升级改造实践:从传统界面到现代化体验的华丽蜕变
前端·人工智能