Nuxt.js引用static或者assets目录下资源-阿里云开发者社区

开发者社区> 开发者小助手-bz> 正文

Nuxt.js引用static或者assets目录下资源

简介: Nuxt.js引用static或者assets目录下资源
+关注继续查看

Node.js

安装

npm i qrcode

API

toDataURL(text, [options], [cb(error, url)])

## 参数:
text String|Array

options: {
    version Type: Number

    errorCorrectionLevel Type: String Default: M
    # low, medium, quartile, high or L, M, Q, H
    
    maskPattern Type: Number
    # 0, 1, 2, 3, 4, 5, 6, 7.

    toSJISFunc Type: Function

    type Type: String Default: image/png
    # image/png, image/jpeg, image/webp
    
    quality Type: Number Default: 0.92
    
    # Renderers options
    margin  Type: Number Default: 4
    scale   Type: Number Default: 4
    width   Type: Number
    color: {
        dark  Type: String Default: #000000ff
        light Type: String Default: #ffffffff
    }
}

cb Type: Function

使用示例

import QRCode from 'qrcode'
 
// With promises
QRCode.toDataURL('I am a pony!')
  .then(url => {
    console.log(url)
  })
  .catch(err => {
    console.error(err)
  })

生成的二维码(边框和文字是我加的)

2.png

Browser

配合jquery使用


<script src="https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js"></script>

<script>
$(document).ready(function () {
        QRCode.toDataURL(window.location.href, { errorCorrectionLevel: 'H' }, function (err, url) {
            // console.log('QRCode', url)
            $('#weixin-code').attr('src', url)
        })
    });
</script> 


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Android之assets资源
assets目录下存放的原生资源文件,通过getAssets()方法获取. 使用: InputStream inputStream; try { inputStream = getAssets().
581 0
tomcat中conf\Catalina\localhost目录下的J2EE项目META-INF配置文件
  发现问题 我们使用JNDI访问数据库时候,在J2EE项目下的META-INF下面会用一个xml文件写上数据库的基本信息。 但当我们在项目中修改该文件以达到修改数据库链接的目的的时候,往往不能生效。     问题原因 tomcat在部署项目的时候,会将该xml文件写入conf\Catalina\localhost文件夹下,项目运行时会从该文件夹下读取该文件,只修改项目中的文
939 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
11047 0
C# Windows Phone App 开发,自制LockScreen 锁定画面类别(Class),从【网路图片】、【Assets资源】、【UI】修改锁定画面。
原文:C# Windows Phone App 开发,自制LockScreen 锁定画面类别(Class),从【网路图片】、【Assets资源】、【UI】修改锁定画面。 一般我们在开发Windows Phone App,有时会需要修改锁定画面,而锁定画面的程式码又臭又长,若日後还有很多支APP需要使用到这个功能,岂不是要打很多次?所以我们何不创建一个自定义类别,将锁定画面的功能写一次就好了,日後若有其他专案使用到该功能,我们只要引入Class或Dll参考即可。
1333 0
Android Studio 添加Assets目录
Android Studio 添加Assets目录:   法一:    Since Android Studio uses the new Gradle-based build system, you should be putting assets/ inside of the source sets (e.
697 0
Vmware Workstation 8 下扩展redhat 的根目录(非LVM模式)
环境介绍:Vmware Workstation 8 下硬盘安装的rhel 5.4 64-bit 系统文件管理的方式为非LVM(逻辑卷管理)关于逻辑卷管理的概念参考博客:http://blog.
853 0
Vmware Workstation 8 下扩展redhat 的根目录(LVM模式)
由于安装软件需要,我的虚拟机的磁盘空间不够了。。今天下午决定尝试下增加 / 目录空间, 我决定把根目录扩展到240G左右。。 一、关闭你的虚拟机系统,找到如下内容:选择"Edit Virtual mache settings” 二、使用linux下的fdisk工具进行分区。
873 0
1569
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《Nacos架构&原理》
立即下载
《看见新力量:二》电子书
立即下载
云上自动化运维(CloudOps)白皮书
立即下载