尝试在 Vue3 项目的 QR Code 中心加载图像。一直在在线阅读 API 文档，看来我应该通过“图像”参数将它作为字符串加载，但每次我尝试通过 QR Code 加载图像时都会完全消失。
我正在专门处理的页面在这里：https://www.npmjs.com/package/qrcode-vue3
以下是代码的当前工作：
<QRCodeVue3
:width="200"
:height="200"
value="HelloWorld"
:qrOptions="{ typeNumber: 0, mode: 'Byte', errorCorrectionLevel: 'H' }"
image="https://cryptologos.cc/logos/ravencoin-rvn-logo.png"
:imageOptions="{ hideBackgroundDots: true, imageSize: 0.4, margin: 0 }"
backgroundColor="white"
:dotsOptions="{
type: 'dots',
color: '#26249a',
gradient: {
type: 'linear',
rotation: 0,
colorStops: [
{ offset: 0, color: '#26249a' },
{ offset: 1, color: '#26249a' },
],
},
}"
:backgroundOptions="{ color: '#ffffff' }"
:cornersSquareOptions="{ type: 'dot', color: '#000000' }"
:cornersDotOptions="{ type: undefined, color: '#000000' }"
/>最终目标我宁愿从我的资产文件夹中加载图像，但我什至无法获得可以加载的简单图像。我知道这是可能的，因为我在 npm 页面上看到了示例二维码，但没有示例代码来演示它。
回答1
意识到我需要添加 crossOrigin = 'Anonymous' 以及我实现了一个 v-bind 到我的本地图像的 url。最终工作解决方案如下：
新组件：
<QRCodeVue3
:width="200"
:height="200"
value="HelloWorld"
:qrOptions="{ typeNumber: 0, mode: 'Byte', errorCorrectionLevel: 'H' }"
v-bind:image="iconUrl"
:imageOptions="{ hideBackgroundDots: true, imageSize: 0.4, margin: 3, crossOrigin: 'Anonymous' }"
backgroundColor="white"
:dotsOptions="{
type: 'dots',
color: '#26249a',
gradient: {
type: 'linear',
rotation: 0,
colorStops: [
{ offset: 0, color: '#26249a' },
{ offset: 1, color: '#26249a' },
],
},
}"
:backgroundOptions="{ color: '#ffffff' }"
:cornersSquareOptions="{ type: 'dot', color: '#000000' }"
:cornersDotOptions="{ type: undefined, color: '#000000' }"
/>加载图像：
export default {
name: "HomeView",
components: {
QRCodeVue3,
},
data() {
return {
iconUrl: require('../assets/ravencoin-rvn-logo.png')
};
},