---
title: "useImage()"
description: "A Vue composable that returns a helper function to generate optimized image URLs."
canonical_url: "https://nuxt.com/modules/image/usage/use-image"
---
# useImage()

> 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`).

## Usage

```js
const img = useImage()

img(src, modifiers, options)
```

**Example:** Generate image URL for `backgroundImage` style.

```js
const img = useImage()

const backgroundStyles = computed(() => {
  const imgUrl = img('https://github.com/nuxt.png', { width: 100 })

  return { backgroundImage: `url('${imgUrl}')` }
})
```

### `img.getSizes`

```js
const img = useImage()

img.getSizes(src, { sizes, modifiers })
```

::warning
Unstable: `getSizes` API might change or be removed.
::

**Parameters:**

- `src`: (string) Source to original image id
- `sizes`: (string) List of responsive image sizes (:)
- `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](https://nuxt.com/modules/image/configuration#providers))
  - `preset`: Use a [preset](https://nuxt.com/modules/image/configuration#presets)

**Example:** Responsive srcset with Vuetify `v-img`

```html
<template>
  <v-img
    :lazy-src="img(src, { width: 10, quality: 70 })"
    :src="img(src, { height, quality: 70 })"
    :srcset="_srcset.srcset"
    :height="height"
    :sizes="_srcset.sizes"
  />
</template>

<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: 'sm:100vw md:100vw lg:100vw xl:100vw',
    modifiers: {
      format: 'webp',
      quality: 70,
      height: props.height
    }
  })
})
</script>
```

---

- [Source](https://github.com/nuxt/image/blob/main/src/runtime/composables.ts)


## Sitemap

See the full [sitemap](https://nuxt.com/sitemap.md) for all pages.