A Vue composable that returns a helper function to generate optimized image URLs.

Sometimes you might need to use a generated image URL directly with applied transformations instead of the <NuxtImg> and <NuxtPicture> components. This is where useImage() comes in (and the helper function it returns, which you will often see referenced directly as $img or img).


const img = useImage()

img(src, modifiers, options)

Example: Generate image URL for backgroundImage style.

const img = useImage()
const backgroundStyles = computed(() => {
  const imgUrl = img('', { width: 100 })
  return { backgroundImage: `url('${imgUrl}')` }


const img = useImage()

img.getSizes(src, { sizes, modifiers })
Unstable: getSizes API might change or be removed.


  • src: (string) Source to original image id
  • sizes: (string) List of responsive image sizes ({breakpoint}:{size}{unit})
  • modifiers: (object) Modifiers passed to provider for resizing and optimizing
    • width: resize to the specified width (in pixels)
    • height: resize to specified height (in pixels)
    • quality: Change image quality (0 to 100)
    • format: Change the image format
    • (any other custom provider modifier)
  • options: (object)
    • provider: (string) Provider name other than default (see providers)
    • preset: Use a preset

Example: Responsive srcset with Vuetify v-img

<script setup lang="ts">
const props = defineProps({
  height: { type: [Number, String], default: 500 },
  src: {
    type: String,
    default: '/img/header-bg.jpg'
const img = useImage()
const _srcset = computed(() => {
  return img.getSizes(props.src, {
    sizes: 'xs:100vw sm:100vw md:100vw lg:100vw xl:100vw',
    modifiers: {
      format: 'webp',
      quality: 70,
      height: props.height

    :lazy-src="img(src, { width: 10, quality: 70 })"
    :src="img(src, { height, quality: 70 })"