API Reference

ImageSettings

Embed an image (e.g. a brand logo) inside the QR code. Use level="H" for the highest error-correction tolerance when embedding images.

Props

Prop	Type	Default	Description
`src`*	`string`	—	URL or data URI of the image to embed.
`width`*	`number`	—	Rendered width of the image in QR module units.
`height`*	`number`	—	Rendered height of the image in QR module units.
`excavate`	`boolean`	`false`	Clear the QR modules behind the image to prevent visual noise.
`x`	`number`	—	Horizontal offset in module units from the left edge. Defaults to center.
`y`	`number`	—	Vertical offset in module units from the top edge. Defaults to center.
`opacity`	`number`	`1`	Image opacity (0–1).
`crossOrigin`	`'anonymous' \| 'use-credentials' \| ''`	—	crossOrigin attribute for raster export of cross-origin images.

Usage

vue

<VueQRCode
  value="https://nuxt.com"
  level="H"
  :image-settings="{
    src: '/logo.svg',
    width: 40,
    height: 40,
    excavate: true,
  }"
/>

Always use level="H" when embedding images. The image covers part of the QR code, so high error correction is needed for reliable scanning.

For raster downloads (png/jpeg) of QR codes with cross-origin images, set crossOrigin: 'anonymous' and ensure the image server sends the correct CORS headers.