首页 > 其他分享 >页面图片验证码显示(base64图片显示)

页面图片验证码显示(base64图片显示)

时间:2023-07-13 17:55:28浏览次数:43  
标签:显示 base64 验证码 图片 data 页面

 

前端在做登陆的时候经常会遇见输入验证码登陆的问题,一般情况下,后端返回的类似一个流图片,在页面中给图片赋值是不能显示的,想下面这种形式

 

这样的形式通常需要前端处理一下这个流,转成base64的形式,进行显示,代码如下:

    async getInterfaceCode() {
      let res = await getInterfaceCode();
      var data = res.data;
      this.imgurl ="data:image/png;base64," +btoa(new Uint8Array(data).reduce((data, byte) => data + String.fromCharCode(byte), ""));

    },

然后将imgurl的地址赋值给img图片就能正常回显了。(要注意一下你的接口的里面要加一个特殊字段哈)下面图片圈起来的字段。

 

标签:显示,base64,验证码,图片,data,页面
From: https://www.cnblogs.com/lxsunny/p/17551687.html

相关文章

  • ckeditor粘贴word图片且图片自动上传组件
    ​ 当前功能基于PHP,其它语言流程大抵相同。大概流程:1.将docx文件上传到服务器中2.使用PHPoffice/PHPword实现将word转换为HTML3.将HTML代码返回并赋值到编辑器中 1编辑器配置修改1.1新增上传wordjson配置在ueditor\php\config.json中新增如下配置:     /*......
  • ckeditor粘贴word图片且图片自动上传插件
    ​ 1.编辑器修改(可选)1.1在 ueditor/config.json 中添加代码块    /* 上传word配置 */    "wordActionName":"wordupload",/* 执行上传视频的action名称 */    "wordFieldName":"upfile",/* 提交的视频表单名称 */    "wordPathFormat":"/p......
  • ckeditor粘贴word图片且图片自动上传代码
    ​图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码目前限chrome浏览器使用首先以um-editor的二进制流保存为例:打开umeditor.js,找到UM.plugins['autoupload'],然后找到autoUploadHandler方法,注释掉其中的代码。加入下面的代码://判断剪贴......
  • vue图片上传组件
    <template><[email protected]@dragenter.prevent="drag=true"@dragleave.prevent="drag=false"@drop.prevent="onDrop"@click="input.click"v-show="status==='uploa......
  • Android Glide加载小gif和图片比较模糊
    其实Glide加载还是可以将小图片加载的非常清晰的,可以通过Glide转换为Bitmap利用Drawable将setFilterBitmap为true但是这玩意解决不了GIF。在没有找到库的情况下:我直接自定义view通过pl.droidsonroids.gif:android-gif-drawable获取时间间隔并将gif解析成bitmap获取像素再通......
  • 爬取 2 万多张 Flickr 图片,莫纳什大学复现 10 年间日本樱花开放的时空特征
    内容一览:近年来,全球气候变化形势严峻,由此引发的蝴蝶效应,正深刻地影响着人类和大自然。在这一背景下,收集数百甚至数千公里范围内开花模式的数据,了解气候变化如何对开花植物产生影响,成为近年来生态研究的重要课题之一。但传统的方法通常需要耗费大量经费,且需要较长的时间进行采样调查......
  • ckeditor粘贴word图片自动上传组件
    ​ 如何做到ueditor批量上传word图片?1、前端引用代码<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>......
  • ckeditor粘贴word图片自动上传插件
    ​  自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了。一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器)中时,编辑器都无法自动上传图片。需要用户手动一张张上传Word图片。如果只有一张图片还能......
  • 怎么解决java Base64 decode windows和linux不一样 这个问题怎么解决?
    解决JavaBase64解码在Windows和Linux上不一致的问题在Java中,使用Base64进行编码和解码是一种常见的操作。然而,有时候会遇到一个问题,就是在Windows和Linux上进行Base64解码时,结果可能会不一致。这个问题一般是由于操作系统之间的换行符差异引起的。问题描述当我们在Windows上进......
  • 【Python&RS】基于GDAL给无人机图片定义坐标系
    ​    前段时间有过一个想法,就是如果可以给无人机拍摄的图片定义坐标系,再使用GADL库里的镶嵌拼接函数,是不是就可以实现快速拼接影像。虽然结果不是正射影像,但效率比无人机厂家的软件提高了很多很多,主要还是看用途。    有了这个想法后就要行动起来,定义一个坐标......