:bgSrc :logoSrc 两属性直接赋值"http://xxxxx.png"会报跨域问题

Binaryify / vue-qr

The Vue Component for Awesome-qr.js

MIT License

849 stars 123 forks source link

:bgSrc :logoSrc 两属性直接赋值"http://xxxxx.png"会报跨域问题 #24

Closed tustman closed 5 years ago

tustman commented 6 years ago

Access to Image at 'http://xxx.yyyyyyyy.com/app/package/2ec8bab90c794f208b6c2137a50dd9db.png' from origin 'http://localhost:9527' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9527' is therefore not allowed access.

如果直接使用img标签可以展示出图片 <img src="http://xxx.yyyyyyyy.com/app/package/2ec8bab90c794f208b6c2137a50dd9db.png">

xiaoshengxianjun commented 6 years ago

对啊，这个问题怎么解决？求方案

tustman commented 6 years ago

@xiaoshengxianjun 建议你用下面这个试试 import Qrcanvas from 'qrcanvas-vue'

const image = new Image() image.src = this.currentLogo image.onload = () => { this.options = Object.assign({}, this.options, { data: 'http://www.xxxxx.png', cellSize: 8, size: 300, logo: { image } }) }

ShingWalker commented 6 years ago

@tustman 你是怎么处理的？

tustman commented 6 years ago

@19L 看我上面的留言, 我是换用了另外一个二维码组件解决的问题,

import Qrcanvas from 'qrcanvas-vue'

const image = new Image()
image.src = this.currentLogo
image.onload = () => {
    this.options = Object.assign({}, this.options, {
        data: 'http://www.xxxxx.png',
        cellSize: 8,
        size: 300,
        logo: {
        image
        }
    })
}