安装组件:
`npm install qrcode.react --save`
引入组件:
`import QRCode from 'qrcode.react';`
## 生成二维码
```html
<QRCode
value='https://www.baidu.com/'// 生成二维码的内容
size={300} // 二维码的大小
fgColor="#000000" // 二维码的颜色
imageSettings={{ // 中间有图片logo
src: logo,
height: 60,
width: 60,
excavate: true
}}
/>
</div>
```
![](https://user-gold-cdn.xitu.io/2019/12/3/16ecad05e04bdf0e?w=299&h=296&f=png&s=3681)
注意:
发现在浏览器中,imageSetting 图片和整体二维码的比例不能超过4:1,图片是在二维码的上方覆盖了一层,底层的二维码并没有改变,如果覆盖的比例过大,导致二维码扫描识别不了正确的。