vue无法看二维码如何解决

发布时间：2023-08-29 11:30:27 所属栏目：教程来源：网络

导读： 　　这篇文章主要介绍了vue看不了二维码如何解决的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue看不了二维码如何解决文章都会有所收获，下面我们一起来

　　这篇文章主要介绍了vue看不了二维码如何解决的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue看不了二维码如何解决文章都会有所收获，下面我们一起来看看吧。

　　一、问题现象

　　通过Vue.js开发的页面，使用微信或其他APP内置浏览器，打开页面后，无法正常识别并扫描二维码，或者说二维码无法正常显示。

　　二、问题分析

　　1.浏览器限制

　　首先，我们需要明确一点，二维码可以被浏览器正确地解析，但是因为浏览器默认限制了访问本地文件，所以在Vue.js开发环境下，我们会看到二维码显示不出来的情况。

　　2.二维码图片转成base64

　　解决方案是将二维码图片转成base64，作为一个dataURL，然后将其直接渲染到HTML中。

　　三、问题解决

　　1.通过URL引入图片

　　<img :src="qrcodeUrl">

　　在Vue.js项目中，使用URL引入图片的方法如上。

　　2.通过dataURL引入图片

　　在项目中引用Base64格式的图片，可以使用background-image引入。

　　<div :style="{ backgroundImage: 'url(' + qrcodeBase64 + ')'}"></div>

　　需要使用canvas将二维码转换成DataURL。

　　import QRCode from 'qrcode';

　　// 获取二维码的DataURL

　　QRCode.toDataURL(url, (err, dataUrl) => {

　　 if(!err) {

　　 this.qrcodeBase64 = dataUrl;

　　 }

　　})

　　3.将Base64编码后的图片输出到HTML中

　　<img :src="`data:image/jpeg;base64,${qrcode}`" />

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!