这篇文章主要介绍了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}`" />关于“vue看不了二维码如何解决”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“vue看不了二维码如何解决”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
