QRCodeVue3 - Load image into center of QR Code

Question

Trying to load an image in the center of a QR Code on a Vue3 project. Been reading through the API documentation online and it appears I'm supposed to load it as a string through the "image" parameter, but every time I try to load the image by QR Code disappears entirely.

The page I'm specifically working through is here: https://www.npmjs.com/package/qrcode-vue3

Below is the current working of the code:

<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' }"
/>

End goal I would prefer to load the image from my assets folder but I can't even get a simple image that works to load. I know it's possible because I see the examples QR codes on the npm page but no example code to demonstrate it.

Answer 1

Realized I needed to add the crossOrigin = 'Anonymous' as well as I implemented a v-bind to a url of my local image. Final working solution is as follows:

New component:

<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' }"
/>

Loading image:

export default {
name: "HomeView",
  components: {
    QRCodeVue3,
  },
  data() {
    return {
      iconUrl: require('../assets/ravencoin-rvn-logo.png')
    };
  },