What should I do if Vue can’t read the QR code?

In recent years, Vue.js has become more and more popular in the front-end world, and more and more developers have turned their attention to this excellent framework. However, some developers may encounter some problems during development using Vue. For example, today we will talk about a common problem-Vue cannot read QR codes.

1. Problem phenomenon

For pages developed through Vue.js, using WeChat or other APP built-in browsers, after opening the page, the QR code, or QR code, cannot be recognized and scanned normally, or QR code The code cannot be displayed properly.

2. Problem Analysis

1. Browser limitations

First of all, we need to make it clear that the QR code can be correctly parsed by the browser, but because the browser defaults Access to local files is restricted, so in the Vue.js development environment, we will see that the QR code cannot be displayed.

2. Convert the QR code image to base64

The solution is to convert the QR code image to base64 as a dataURL, and then render it directly into HTML.

3. Problem Solving

1. Introduce pictures through URL

<img :src="qrcodeUrl">

In the Vue.js project, the method of using URL to introduce pictures is as above.

2. Import images through dataURL

To reference images in Base64 format in the project, you can use background-image to import them.

<div :style="{ backgroundImage: &#39;url(&#39; + qrcodeBase64 + &#39;)&#39;}"></div>

You need to use canvas to convert the QR code into DataURL.

import QRCode from 'qrcode';

// 获取二维码的DataURL
QRCode.toDataURL(url, (err, dataUrl) => {
  if(!err) {
    this.qrcodeBase64 = dataUrl;
  }
})

3. Output the Base64 encoded image into HTML

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

4. Summary

If you encounter a QR code that cannot be recognized during Vue.js development In this case, we need to perform Base64 processing in the code, convert the QR code image into DataURL and output it to HTML to solve this problem. In addition, during Vue.js development, we must always pay attention to browser restrictions on applications to prevent other problems.

The above is the detailed content of What should I do if Vue can’t read the QR code?. For more information, please follow other related articles on the PHP Chinese website!