React生成带logo的二维码

1.安装模块

npm install qrcode-react

或者

yarn add qrcode-react

2. 属性

   size            二维码大小  number类型
   bgColor     二维码背景色string类型（CSS颜色）"#FFFFFF"颜色值
   fgColor      颜色 string 类型（CSS颜色）
   logo           图片地址 string类型
   logoWidth  二维码宽度 number类型
   logoHeight  二维码高度  number类型

3. 代码展示

/***
 * 扫码预览
 */
import React, { PureComponent } from 'react'; // 不必严格按照我的写只要把第二行引入即可
import QRCode from 'qrcode-react';
import './index.less';  //引入自己的样式文件
 
class QrcodeModal extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {}
  }
 
  render() {
    return (
      <div>
        <QRCode
          size={150}
          value={`https://www.baidu.com`}
          logo={`https://www.baidu.com/img/baidu_jgylogo3.gif`}
          logoWidth={50}
          logoHeight={50}
        />
      </div>
    );
  }
}
 
export default QrcodeModal;

（注意：value值最好不要带中文，否则会出现不能扫描的情况）
本文章综合https://www.cnblogs.com/crazycode2/p/12550979.html和https://www.jianshu.com/p/d549dd71434b

老规矩留下微信号：yzh2030999zxy