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

项目代码:(注意: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;

.


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM