近年来，vue.js在前端界的热度越来越高，越来越多的开发者将目光投向了这个优秀的框架。然而，在使用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.js开发中如果遇到不能识别二维码的情况，我们需要在代码中进行Base64的处理，将二维码图片转换成DataURL后输出到HTML中，以此来解决这个问题。此外，在Vue.js开发中我们也要时刻注意浏览器对应用的限制，防止出现其他问题。
以上就是vue看不了二维码怎么办的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
532
收藏
