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

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

一、直接在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()创建的对象
        };
      });
相关推荐
Baklib梅梅8 分钟前
探码科技再获“专精特新”认定:Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby
南方以南_14 分钟前
Chrome开发者工具
前端·chrome
YiHanXii21 分钟前
this 输出题
前端·javascript·1024程序员节
楊无好28 分钟前
React中ref
前端·react.js
维他命Coco28 分钟前
js常见开发学习
javascript
程琬清君30 分钟前
vue3 confirm倒计时
前端·1024程序员节
歪歪1001 小时前
在C#中详细介绍一下Visual Studio中如何使用数据可视化工具
开发语言·前端·c#·visual studio code·visual studio·1024程序员节
唔661 小时前
flutter实现web端实现效果
前端·flutter
csj501 小时前
前端基础之《React(2)—webpack简介-使用Babel》
前端·react
!win !2 小时前
分享二个实用正则
javascript·正则表达式