---
title: "Image"
description: "Nuxt UI integrates with Nuxt Image to optimize the images rendered by its components."
canonical_url: "https://ui.nuxt.com/docs/getting-started/integrations/image"
---
# Image

> Nuxt UI integrates with Nuxt Image to optimize the images rendered by its components.

## Installation

To get started, you can follow the official [guide](https://image.nuxt.com/get-started/installation) or in summary:

```bash [pnpm]
pnpm add @nuxt/image
```

```bash [yarn]
yarn add @nuxt/image
```

```bash [npm]
npm install @nuxt/image
```

```bash [bun]
bun add @nuxt/image
```

Then, add the `@nuxt/image` module in your `nuxt.config.ts`:

```ts [nuxt.config.ts] {4}
export default defineNuxtConfig({
  modules: [
    '@nuxt/ui',
    '@nuxt/image'
  ],
  css: ['~/assets/css/main.css']
})
```

## Usage

When `@nuxt/image` is installed, Nuxt UI renders the [`<NuxtImg>`](https://image.nuxt.com/usage/nuxt-img) component instead of the native `img` tag in the following components:

- [Avatar](https://ui.nuxt.com/docs/components/avatar)
- [BlogPost](https://ui.nuxt.com/docs/components/blog-post)
- [ChangelogVersion](https://ui.nuxt.com/docs/components/changelog-version)
- [ColorModeImage](https://ui.nuxt.com/docs/components/color-mode-image)
- [ProseImg](https://ui.nuxt.com/docs/typography/images-and-embeds)

There is nothing else to configure. Any `<NuxtImg>` prop you pass to these components, like `format`, `quality` or `provider`, is forwarded to it:

```vue
<template>
  <UAvatar src="/avatar.png" format="webp" />

  <UBlogPost
    title="Introducing Nuxt Image"
    :image="{ src: '/blog/nuxt-image.png', format: 'webp', quality: 80 }"
  />
</template>
```

> [!NOTE]
> See: https://image.nuxt.com/get-started/configuration#domains
> 
> Remote images are only optimized when their host is listed in the `image.domains` option of your `nuxt.config.ts`.

> [!TIP]
> 
> The Avatar passes its size as `width` and `height`, so `<NuxtImg>` requests an image that matches the rendered size.

### Opt-out

To render a native `img` tag on a single Avatar, use the `as` prop:

```vue
<template>
  <UAvatar src="https://github.com/benjamincanac.png" :as="{ img: 'img' }" />
</template>
```

---

- [nuxt/image](https://github.com/nuxt/image)


## Sitemap

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