关于Img不能直接用src显示Base64的验证码的问题

已于 2022-03-03 10:48:14 修改
阅读量3.2k 收藏
点赞数 1
分类专栏： 验证码 文章标签： webview gnu linq
于 2022-03-03 10:43:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhao8912/article/details/123247993
版权

关于验证码返回的方式目前涉及到的有图片二进制流和Base64

（1）返回图片二进制流可以直接在Img上用src，类似<img src="返回图片二进制流的调用地址">

（2）返回Base64字符串的不能直接用Img上的src，类似<img src="data:image/Jpeg;base64,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">

会发现这两种src里边的内容是不一样的，所以说base64不能在img上的src挂上调用的地址。

Base64的需要先获取到验证码Base64的值，再把值赋给src才可以。这就是传说中的我不杀伯仁伯仁却因我而死

风若寒89
关注
专栏目录
浏览器或者＜img src = ““/＞把Base64码转换成图片
hkl_Forever的博客
07-06 7826
3、转换支持 jpeg 格式：data:image/jpeg;base64,+生成的base64码。1、转换支持 png 格式：data:image/png;base64,+生成的base64码。2、转换支持 jpg 格式：data:image/jpg;base64,+生成的base64码。
java 验证码 base64_JAVA使用BASE64生成验证码
weixin_32954161的博客
02-19 449
public void createImage(HttpServletResponse resp, HttpServletRequest request,String xcode) throwsIOException {TraceLoggerUtil.info("执行微信端图片验证码接口请求参数:xcode{}",xcode);switch (random.nextInt(5)) {case 0:...
img标签 src中放base64编码
热门推荐
卡三ss
05-16 1万+
<img :src="'data:image/Jpeg;base64,'+imgurl" alt=""> var imgurl= ` /9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2Nj.
Img 标签 src 调用 API 返回 base64 字符串的解决办法
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
07-31 1195
属性）指向一个 Base64 编码的字符串时，浏览器会直接解析该字符串并在页面上显示对应的图像。这种方式非常适用于较小的图像文件，如图标、Logo 或者简单的图形，因为可以减少 HTTP 请求的数量，从而提高页面加载速度。通过上述示例，你可以看到如何有效地处理 API 返回的 Base64 图像数据，并将其正确地显示在网页上。这些示例不仅适用于初学者，也可以为有经验的开发者提供参考。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。
Img src用base64数据
dibeichan3033的博客
07-17 2158
<img src='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQE...
img src 显示 base64
weixin_41235296的博客
11-30 4204
base64 传输数据到页面！ &lt;img src='data:image/jpeg;base64,base64Data' style="width: 200px; hight: 200px"&gt; 学到一种 新的方式呵呵 ，下面还有注解： data表示取得数据的协定名称, image/png是数据类型名称,base64 是数据的编码方法,逗号后面是image/png文件base6...
html篇：img src使用base64格式数据
Cx的博客
11-12 1万+
html篇：img src使用base64格式数据 img src 使用 base64 图片数据 在网页上显示一张图片通常是 <img src="../xxx.png" > 或 <img src="www.url.com/te.png"> 但是如果我们有图片base64数据；也可以使用 base64数据来在网页上显示一张图片； 格式： <img src="data:image/png;base64,Qk32egAAAAAAADYE...(图片base数据)> .
html img Src base64 图片显示
软件研发实战应用技术分享
09-08 1万+
大家可能注意到了，网页上有些图片的src或css背景图片的url后面跟了一大串字符。 比如：data:image/png;base64,　iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/　KEAUFFR0Cb
使用base64对图片的二进制进行编码并用ajax进行显示
08-31
为了解决这个问题，我们可以先对图片的二进制数据进行Base64编码，然后在`src`属性中使用"data:" URL模式，这样浏览器就能理解并直接解析这个编码后的字符串。 以题目中给出的实例代码为例，首先在JavaScript中，...
java生成图片验证码返回base64图片信息
Agger的博客
11-21 1万+
一般在生成验证码，有两种形式： 前端js生成，并在前端验证通过，提交表单到后台。安全性较低，很容易被识别后端生成返回给前端展示，提交用户验证码到后台验证通过。安全性较前端方式高，因为整个验证过程在后台。 其实验证码也没有绝对的安全，只能说后端的处理方式比前端好一些而已，所以这个示例是利用java后台生成二维码图片，并返回给前端base64格式，展示给用户，后台将二维码真值保存在sess
后端图形验证码base64编码字符串及前端获取图形验证码base64编码字符串并解码显示图形验证码代码
IT小浣熊的博客
12-25 4166
后端生成图形验证码，并进行base64编码生成字符串传至前端，由前端解码显示图形验证码，代码如下： 后端-获取图形验证码base64编码字符串接口： /** * @param response * @return map * @throws Exception 获取图形验证码接口 */ @RequestMapping("/getVerifyCode...
base64 golang 图片_gin生成base64的验证码图片
weixin_30303283的博客
01-16 404
第一步 下载第三方组件go get -u github.com/mojocn/base64Captcha下载过程中可能出错，主要原因还是go get golang.org/x/image 失败解决方法：①cd $GOPATH/src/golang.org/x② git clone https://github.com/golang/image第二歩 设置CaptchaConfig类type Cap...
img src base64 mysql_html img Src base64 图片显示
weixin_39819138的博客
01-19 54
2012-05-03 16:501640人阅读评论(0)大家可能注意到了，网页上有些图片的src或css背景图片的url后面跟了一大串字符，比如：data:image/png;base64,　iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJRE...
<img>标签的src属性直接显示base64转码后的字符串变为图片
weixin_30764883的博客
07-17 2085
在<img>标签 src 增加：data:image/jpeg;base64 格式：<img src="data:image/jpeg;base64,base64转码后的字符串" ></img> <img src='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQg...
img src 使用 base64 图片数据
weixin_33972649的博客
03-11 1289
img src 使用 base64 图片数据 在网页上显示一张图片通常是 &lt;img src="xxx.png" &gt; 或 &lt;img src="www.url.com/te.png"&gt; 但是如果我们有图片base64数据；也可以使用 base64数据来在网页上显示一张图片； 格式： &lt;img src="data:image/bmp;base64,Qk32egAAA...
【JS】img标签使用base64图片以及如何将图片转为base64格式
owo_ovo的博客
09-14 1万+
首先获取file对象，然后创建一个FileReader对象。监听FileReader对象的load事件，在load事件被触发时，我们就可以通过reader.result获取到Base64字符串。最后调用readAsDataURL方法将文件读取成data URL。
base64可以直接给img的src赋值！
我爱美女S的博客
10-21 2390
base64可以直接给img的src赋值！
VUE 实现base64显示验证码图片显示
05-20
可以使用 Vue 的 `v-bind` 指令来绑定图片的 `src` 属性，然后将验证码图片的 Base64 编码作为 `src` 属性的值即可。 首先在 Vue 的 data 中定义一个变量来保存验证码的 Base64 编码： ``` data() { return { captchaImg: '' } } ``` 然后在 mounted 钩子函数中获取验证码图片的 Base64 编码，并将其赋值给 `captchaImg` 变量： ``` mounted() { // 获取验证码图片的 Base64 编码 axios.get('/api/captcha').then(res => { this.captchaImg = res.data.data }) } ``` 最后在模板中使用 `v-bind` 指令来绑定图片的 `src` 属性： ``` <template> <div> <img v-bind:src="captchaImg" alt="验证码"> </div> </template> ``` 这样就可以在页面中显示验证码图片了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值