【jquery加载后台返回的二维码图片】

原创已于 2022-12-09 15:45:59 修改 · 418 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #前端 #javascript

于 2022-11-25 20:14:18 首次发布

java 同时被 2 个专栏收录

30 篇文章

订阅专栏

thymeleaf

2 篇文章

订阅专栏

这篇博客探讨了在前端环境中如何处理二维码加载的问题。文章指出，在本地和测试环境中，直接加载二维码图片不可行。代码示例展示了如何使用JavaScript的window.onload事件来动态设置img标签的src属性，并通过AJAX从接口获取数据。当接收到数据时，如果数据是base64编码的二维码图像，代码会将其设置为图片源，实现二维码的动态显示。博客强调了解析二维码格式和解码方式的重要性。

昨天图片加载一个二维码，那玩意本地环境、测试环境还不能测试。

//最大的div撑满   img 撑满  自己根据样式浮动大小 src属性为""
<div class="main-container" id="main-container">
	<div class="main-container-inner">
		<img type="text" style="width: 100%;height: 100%;margin-top: 40px"   id="qrid" name="qrid"  src=""  class="form-control" />
		<input type="text" style="display: none" id="comId" name="comId"   class="form-control"  th:value="${comId}"/>
		</div>
	</div>
	<div th:replace="fragments/base :: scroll-up"></div>
</div>

src属性为""很重要哈！

必须要清楚你这个图片展示的格式，以及解码方式

//初始化拿取传递的属性去请求接口内的二维码
window.onload = function () {
		submitDzyyzz();
	}
	function submitDzyyzz() {
		$.ajax({
			url:"",
			data:{},
			dataType:'json',
			type:"post",
			success:function(data){
				if(data.status == "1" || data.status == 1) {
					console.log(data);
					//我拿到是自带解码的二维码，如未获取获取到data:image/jpeg;base64
					//请酌情自行修改data:image/**;base64
				    $("#qrid").attr('src','data:image/jpeg;base64,'+data.qrimage)
					$("#qrid").attr('src',data.qrimage);
				}
		})
	}