react 项目里生成带logo的二维码

Z时代
2024-01-10
分类：综合

react

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

项目代码：（注意：value值最好不要带中文，否则会出现不能扫描的情况）
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;