### Install Dependencies

Source: https://github.com/nuxt/image/blob/main/docs/content/1.get-started/4.contributing.md

Install project dependencies using pnpm.

```bash
pnpm install
```

--------------------------------

### Start Documentation Development Server

Source: https://github.com/nuxt/image/blob/main/docs/content/1.get-started/4.contributing.md

Run the documentation site in development mode.

```bash
pnpm docs:dev
```

--------------------------------

### Setup development environment

Source: https://github.com/nuxt/image/blob/main/README.md

Commands for preparing and running the development environment for the repository.

```sh
corepack enable
```

```sh
pnpm install
```

```sh
pnpm dev:prepare
```

```sh
pnpm dev
```

--------------------------------

### Start Development Playground

Source: https://github.com/nuxt/image/blob/main/docs/content/1.get-started/4.contributing.md

Run the Nuxt Image playground in development mode.

```bash
pnpm dev
```

--------------------------------

### Install Sharp for Specific Platforms (npm)

Source: https://github.com/nuxt/image/blob/main/docs/content/1.get-started/1.installation.md

Manually install sharp binaries for specific target platforms using npm to address cross-platform compatibility issues.

```bash
npm install --cpu=x64 --os=linux sharp
npm install --cpu=arm64 --os=linux sharp
```

--------------------------------

### Example Usage of Umbraco Provider with Modifiers

Source: https://github.com/nuxt/image/blob/main/docs/content/3.providers/umbraco.md

A comprehensive example demonstrating the Umbraco provider with multiple modifiers including fit, focal point, format, and quality.

```vue
<template>
  <NuxtImg
    provider="umbraco"
    src="/media/hvjlhtfw/home-full-screen-4.png"
    width="500"
    height="200"
    format="webp"
    :quality="60"
    :modifiers="{
      fit: 'crop',
      focalPointXY: '0.5488476724567298,0.5772994963168611'
    }"
  />
</template>
```

--------------------------------

### Install Nuxt Image module

Source: https://github.com/nuxt/image/blob/main/README.md

Use the Nuxt CLI to add the @nuxt/image dependency to your project.

```sh
npx nuxt module add image
```

--------------------------------

### Cloudimage Usage Examples

Source: https://github.com/nuxt/image/blob/main/docs/content/3.providers/cloudimage.md

Common patterns for absolute URL handling and automatic baseURL fallback.

```ts
export default defineNuxtConfig({
  image: {
    cloudimage: {
      cdnURL: 'https://demo.cloudimg.io/v7'
    }
  }
})
```

```ts
export default defineNuxtConfig({
  image: {
    cloudimage: {
      token: 'demo',
      apiVersion: 'v7'
      // baseURL will automatically fall back to the website's base URL
    }
  }
})
```

--------------------------------

### Initialize useImage() Helper

Source: https://github.com/nuxt/image/blob/main/docs/content/2.usage/3.use-image.md

Import and initialize the `useImage()` composable to get the image URL generation helper function.

```javascript
const img = useImage()

img(src, modifiers, options)
```

--------------------------------

### Specify Output Format

Source: https://github.com/nuxt/image/blob/main/docs/content/3.providers/twicpics.md

Examples of using the format property to define the output image format.

```vue
<NuxtImg
  provider="twicpics"
  src="/cat_1x1.jpg"
  format="avif"
/>
```

```vue
<NuxtImg
  provider="twicpics"
  src="/cat_1x1.jpg"
  format="preview"
/>
```

--------------------------------

### Nuxt Image AWS Amplify Configuration

Source: https://github.com/nuxt/image/blob/main/docs/content/3.providers/aws-amplify.md

Configuration examples for Nuxt Image with AWS Amplify.

```APIDOC
## Nuxt Image AWS Amplify Integration

This provider offers first-class integration with AWS Amplify Hosting, enabling optimized image delivery.

### Domains

To use external URLs, hostnames must be whitelisted.

#### Example Configuration

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  image: {
    domains: ['avatars0.githubusercontent.com']
  }
})
```

### Sizes

Specify custom `width` properties used in NuxtImg, NuxtPicture, and $img. If a width is not defined, the image will fallback to the next bigger width.

#### Example Configuration

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  image: {
    screens: {
      icon: 40,
      avatar: 24
    }
  }
})
```

### Modifiers

All default modifiers from AWS documentation are available.

#### Example Usage

```vue
<NuxtImg
  src="/test.jpg"
  height="512"
  width="512"
  :modifiers="{ flip: true }"
  :quality="90"
/>
```

### Options: `formats`

Specify the image format allow list for optimization.

- Type: **String[]** (optional)
- Default: `['image/jpeg', 'image/png', 'image/webp', 'image/avif']`

#### Example Configuration

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  image: {
    awsAmplify: {
      formats: ['image/jpeg', 'image/png', 'image/webp']
    }
  }
})
```
```

--------------------------------

### Configure Sharp for Cross-Platform Compatibility (pnpm)

Source: https://github.com/nuxt/image/blob/main/docs/content/1.get-started/1.installation.md

Configure pnpm in package.json to install sharp binaries for multiple operating systems and CPU architectures to ensure cross-platform compatibility.

```json
{
  "pnpm": {
    "supportedArchitectures": {
      "os": ["current", "linux"],
      "cpu": ["current", "x64", "arm64"]
    }
  }
}
```

--------------------------------

### Force Nuxt Upgrade

Source: https://github.com/nuxt/image/blob/main/docs/content/1.get-started/1.installation.md

Run this command to force a Nuxt upgrade and potentially recreate the lockfile, which can resolve installation issues.

```bash
npx nuxt upgrade --force
```

--------------------------------

### Apply Image Fit Properties

Source: https://github.com/nuxt/image/blob/main/docs/content/3.providers/twicpics.md

Examples of using the fit property to control image resizing and cropping behavior.

```vue
<NuxtImg
  provider="twicpics"
  src="/football.jpg"
  height="300"
  width="300"
/>
```

```vue
<NuxtImg
  provider="twicpics"
  src="/football.jpg"
  fit="resize"
  height="300"
  width="300"
/>
```

```vue
<NuxtImg
  provider="twicpics"
  src="/cat_1x1.jpg"
  fit="contain"
  height="600"
  width="300"
/>
```

```vue
<NuxtImg
  provider="twicpics"
  src="/cat_1x1.jpg"
  fit="contain"
  height="600"
  width="300"
  background="red"
/>
```

--------------------------------

### Responsive Image with Vuetify v-img

Source: https://github.com/nuxt/image/blob/main/docs/content/2.usage/3.use-image.md

This example shows how to integrate the `useImage()` composable with Vuetify's `v-img` component to handle responsive images. It utilizes `img()` for the main source and lazy source, and `img.getSizes()` to generate `srcset` and `sizes` for optimal loading across different screen sizes.

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

--------------------------------

### Configure Sharp for Cross-Platform Compatibility (yarn)

Source: https://github.com/nuxt/image/blob/main/docs/content/1.get-started/1.installation.md

Configure yarn in .yarnrc.yml (v3+) to install sharp binaries for multiple operating systems and CPU architectures to ensure cross-platform compatibility.

```yaml
supportedArchitectures:
  os:
    - current
    - linux
  cpu:
    - current
    - x64
    - arm64
```

--------------------------------

### Update @nuxt/image dependency

Source: https://github.com/nuxt/image/blob/main/docs/content/1.get-started/5.migration.md

Install the latest version of @nuxt/image using your preferred package manager.

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

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

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

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

```bash
deno add npm:@nuxt/image
```

--------------------------------

### Configure Directus Provider in nuxt.config.ts

Source: https://github.com/nuxt/image/blob/main/docs/content/3.providers/directus.md

Basic setup for the Directus provider requiring the base URL of the assets directory.

```ts
export default defineNuxtConfig({
  image: {
    directus: {
      // This URL needs to include the final `assets/` directory
      baseURL: 'http://localhost:8055/assets'
    }
  }
})
```

--------------------------------

### Use Imgix with NuxtImg

Source: https://github.com/nuxt/image/blob/main/docs/content/3.providers/imgix.md

Utilize the NuxtImg component with the 'imgix' provider and apply Imgix-specific modifiers for advanced image manipulation. This example demonstrates format and compression, along with face cropping.

```vue
<NuxtImg
  provider="imgix"
  src="/blog/woman-hat.jpg"
  width="300"
  height="500"
  fit="cover"
  :modifiers="{ auto: 'format,compress', crop: 'faces' }"
/>
```

--------------------------------

### Generate Image URL for Background Style

Source: https://github.com/nuxt/image/blob/main/docs/content/2.usage/3.use-image.md

Use the `img` helper to generate an optimized image URL for use in CSS `backgroundImage` styles. This example demonstrates generating a URL for a thumbnail.

```javascript
const img = useImage()

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

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

--------------------------------

### Apply Image Modifiers

Source: https://github.com/nuxt/image/blob/main/docs/content/3.providers/supabase.md

Example of using modifiers like quality and resize within the NuxtImg component.

```vue
<NuxtImg
  provider="supabase"
  src="/photos/landscape.jpg"
  width="800"
  height="600"
  :modifiers="{ quality: 85, resize: 'cover' }"
/>
```

--------------------------------

### Configure Strapi as Default Image Provider

Source: https://github.com/nuxt/image/blob/main/docs/content/3.providers/strapi.md

Set Strapi as the default image provider in your Nuxt configuration. No additional setup is needed beyond specifying 'strapi'.

```typescript
export default defineNuxtConfig({
  image: {
    strapi: {}
  }
})
```

--------------------------------

### Get Responsive Image Sizes with getSizes

Source: https://github.com/nuxt/image/blob/main/docs/content/2.usage/3.use-image.md

The `img.getSizes` method generates responsive image `srcset` and `sizes` attributes. It takes the image source, an object defining responsive breakpoints and sizes, and optional modifiers for image optimization.

```javascript
const img = useImage()

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

--------------------------------

### Prepare Development Environment

Source: https://github.com/nuxt/image/blob/main/docs/content/1.get-started/4.contributing.md

Generate type stubs for the Nuxt Image project.

```bash
pnpm dev:prepare
```

--------------------------------

### Build Project

Source: https://github.com/nuxt/image/blob/main/docs/content/1.get-started/4.contributing.md

Build the Nuxt Image project. Ensure no errors are reported before creating a PR.

```bash
pnpm build
```

--------------------------------

### Serve images using variants and flexible transformations

Source: https://github.com/nuxt/image/blob/main/docs/content/3.providers/cloudflareimages.md

Demonstrates usage of named variants versus flexible on-the-fly transformations.

```vue
<!-- Uses the 'public' variant (default when no modifiers) -->
<NuxtImg provider="cloudflareimages" src="my-image-id" />

<!-- Uses a named variant -->
<NuxtImg
  provider="cloudflareimages"
  src="my-image-id"
  :modifiers="{ variant: 'thumbnail' }"
/>

<!-- Uses flexible variants (requires enablement in dashboard) -->
<NuxtImg
  provider="cloudflareimages"
  src="my-image-id"
  width="400"
  height="300"
  fit="cover"
/>
```

--------------------------------

### Opt into Edge Channel (package.json)

Source: https://github.com/nuxt/image/blob/main/docs/content/1.get-started/1.installation.md

Update the @nuxt/image dependency in package.json to point to the nightly build to opt into the edge release channel.

```diff
{
  "devDependencies": {
-   "@nuxt/image": "^1.0.0"
+   "@nuxt/image": "npm:@nuxt/image-nightly@latest"
  }
}
```

--------------------------------

### Run Tests

Source: https://github.com/nuxt/image/blob/main/docs/content/1.get-started/4.contributing.md

Execute the test suite for Nuxt Image.

```bash
pnpm test
```

--------------------------------

### Set Image Fit and Format

Source: https://github.com/nuxt/image/blob/main/docs/content/3.providers/builderio.md

The `fit` modifier controls how the image fits within dimensions, with `contain` being an example. This modifier is only effective when the `format` is set to `webp`.

```vue
<NuxtImg src="..." width="300" height="300" modifiers="{ fit: 'contain', format: 'webp' }" />
```

--------------------------------

### Enable global $img helper

Source: https://github.com/nuxt/image/blob/main/docs/content/1.get-started/2.configuration.md

Set inject to true to globally initialize the $img helper throughout the application.

```ts
export default defineNuxtConfig({
  image: {
    inject: true
  }
})
```

--------------------------------

### Configure NuxtImg placeholder prop

Source: https://github.com/nuxt/image/blob/main/docs/content/2.usage/1.nuxt-img.md

Demonstrates various ways to use the placeholder prop, including automatic generation, custom dimensions, and external image paths.

```vue
<!-- Automatically generate a placeholder based on the original image -->
<NuxtImg src="/nuxt.png" placeholder />

<!-- Set a width, height for the automatically generated placeholder  -->
<NuxtImg src="/nuxt.png" :placeholder="[50, 25]" />

<!-- Set a width, height, quality & blur for the automatically generated placeholder  -->
<NuxtImg src="/nuxt.png" :placeholder="[50, 25, 75, 5]" />

<!-- Set the width & height of the automatically generated placeholder, image will be a square -->
<NuxtImg src="/nuxt.png" :placeholder="15" />

<!-- Provide your own image -->
<NuxtImg src="/nuxt.png" placeholder="./placeholder.png" />
```

--------------------------------

### Configure Remote Image Domains via Environment Variable

Source: https://github.com/nuxt/image/blob/main/docs/content/1.get-started/3.providers.md

Set the NUXT_IMAGE_DOMAINS environment variable to a comma-separated list of domains to allow remote image optimization.

```bash
NUXT_IMAGE_DOMAINS="example.com,yourdomain.com"
```

--------------------------------

### Set Prismic as Default Provider in Nuxt Config

Source: https://github.com/nuxt/image/blob/main/docs/content/3.providers/prismic.md

Configure Nuxt Image to use Prismic as the default image provider by specifying 'prismic' in the nuxt.config.ts file. No additional setup is needed for the Prismic provider itself.

```typescript
export default defineNuxtConfig({
  image: {
    prismic: {}
  }
})
```

--------------------------------

### Add Nuxt Image Dependency (Manual)

Source: https://github.com/nuxt/image/blob/main/docs/content/1.get-started/1.installation.md

Manually add the @nuxt/image dependency to your project using your preferred package manager.

```bash
npm i @nuxt/image
```

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

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

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

--------------------------------

### Define image presets

Source: https://github.com/nuxt/image/blob/main/docs/content/1.get-started/2.configuration.md

Create reusable configuration collections to unify image settings across the project.

```ts
export default defineNuxtConfig({
  image: {
    presets: {
      avatar: {
        modifiers: {
          format: 'jpg',
          width: 50,
          height: 50
        }
      }
    }
  }
})
```

```vue
<template>
  <NuxtImg
    preset="avatar"
    src="/nuxt-icon.png"
  />
</template>
```

--------------------------------

### Configure Prepr Project Name

Source: https://github.com/nuxt/image/blob/main/docs/content/3.providers/prepr.md

Specify your Prepr project name in the Nuxt configuration to enable the Prepr provider.

```typescript
export default defineNuxtConfig({
  image: {
    prepr: {
      // E.g.: https://YourProjectName.prepr.io
      projectName: 'YourProjectName'
    }
  }
})
```

--------------------------------

### Responsive Image Sizes with NuxtImg

Source: https://github.com/nuxt/image/blob/main/docs/content/2.usage/1.nuxt-img.md

Configure responsive image sizing using the `sizes` prop, which accepts a space-separated list of screen size/width pairs. The default size is used until the next specified screen width.

```vue
<NuxtImg
  src="/logos/nuxt.png"
  sizes="100vw sm:50vw md:400px"
/>
```

--------------------------------

### Use Builder.io Provider

Source: https://github.com/nuxt/image/blob/main/docs/content/3.providers/builderio.md

Specify the `builderio` provider and pass the Builder.io image URL to the `src` prop. Set desired `width` and `height` for the image.

```vue
<NuxtImg 
  provider="builderio"
  src="https://cdn.builder.io/api/v1/image/assets/YJIGb4i01jvw0SRdL5Bt/869bfbaec9c64415ae68235d9b7b1425"
  width="300"
  height="300"
/>
```

--------------------------------

### Configure Flyimg in nuxt.config.ts

Source: https://github.com/nuxt/image/blob/main/docs/content/3.providers/flyimg.md

Set up the Flyimg provider by specifying the server URL and the website's public URL for relative paths.

```ts
export default defineNuxtConfig({
  image: {
    flyimg: {
      // URL of your Flyimg server
      baseURL: 'https://flyimg.example.com',
      // Public URL of your website — only needed for relative image paths
      sourceURL: 'https://www.example.com',
    }
  }
})
```

```ts
export default defineNuxtConfig({
  image: {
    flyimg: {
      // Unique subdomain provided by Flyimg SaaS
      baseURL: 'https://img-abc123.flyimg.io',
      // Public URL of your website — only needed for relative image paths
      sourceURL: 'https://www.example.com',
    }
  }
})
```

--------------------------------

### Image Directory Configuration (`dir`)

Source: https://github.com/nuxt/image/blob/main/docs/content/1.get-started/2.configuration.md

Configure the source image directory for image providers like `ipx` and `ipxStatic`. By default, images are expected in the `public` directory.

```APIDOC
## `dir`

### Description
This option allows you to specify the location of the source images when using the `ipx` or `ipxStatic` provider. By default, this is set to `public`.

### Configuration Example
```ts
// nuxt.config.ts
export default defineNuxtConfig({
  image: {
    dir: 'assets/images'
  }
})
```

### Notes
- For `ipxStatic` provider, changing `dir` from `public` can cause 404 errors if images are not crawled during generation.
- For `ipx` provider, ensure the customized `dir` is deployed.
- Some providers (e.g., Vercel) do not support directories other than `public/` for assets as resizing occurs at runtime.
```

--------------------------------

### Overlay Image Transformation

Source: https://github.com/nuxt/image/blob/main/docs/content/3.providers/imagekit.md

Demonstrates how to overlay one image onto another using the `raw` parameter with the `l-image` layer type. This is useful for watermarking or creating dynamic banners.

```APIDOC
## Overlay Image

### Description
Overlay an image on top of another image (base image). You can use this to create dynamic banners, watermarking, etc.

### Method
Not Applicable (Configuration within NuxtImg component)

### Endpoint
Not Applicable (Configuration within NuxtImg component)

### Parameters
#### Modifiers
- **raw** (string) - Required - A string of layer transformations. For image overlay, it starts with `l-image` followed by image source and other transformation parameters, ending with `l-end`.
  - Example: `l-image,i-default-image.jpg,w-300,h-200,b-5_FFFFFF,fo-top_left,l-end`

### Request Example
```vue
<template>
  <NuxtImg
    provider="imagekit"
    src="/default-image.jpg"
    :modifiers="modifiers"
  />
</template>

<script setup lang="ts">
const modifiers = {
  raw: 'l-image,i-default-image.jpg,w-300,h-200,b-5_FFFFFF,fo-top_left,l-end'
}
</script>
```

### Response
#### Success Response (200)
An image with the specified overlay applied.

#### Response Example
(Image URL with transformations applied)
```

--------------------------------

### <NuxtImg> Component Usage

Source: https://github.com/nuxt/image/blob/main/docs/content/2.usage/1.nuxt-img.md

Demonstrates the basic usage of the <NuxtImg> component, which functions as a direct replacement for the native <img> tag.

```APIDOC
## Basic Usage of <NuxtImg>

### Description
The `<NuxtImg>` component is a drop-in replacement for the native `<img>` tag. It optimizes images using built-in providers, converts `src` to optimized URLs, and supports responsive sizing.

### Method
Component

### Endpoint
N/A (Component)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```vue
<NuxtImg src="/nuxt-icon.png" />
```

### Response
#### Success Response (200)
Outputs a native `<img>` tag.

#### Response Example
```html
<img src="/nuxt-icon.png">
```

::note
With the default provider, ensure `/nuxt-icon.png` is located in the `public/` directory for Nuxt 3.
::
```

--------------------------------

### Check Code Style

Source: https://github.com/nuxt/image/blob/main/docs/content/1.get-started/4.contributing.md

Lint the code to ensure it adheres to the project's style guidelines.

```bash
pnpm lint
```

--------------------------------

### Check and upgrade Nuxt version

Source: https://github.com/nuxt/image/blob/main/docs/content/1.get-started/5.migration.md

Verify the current Nuxt version and upgrade if necessary to meet the v2 requirement.

```bash
npm list nuxt
```

```bash
npx nuxt upgrade --channel v3
```

--------------------------------

### Shopify Provider Configuration

Source: https://github.com/nuxt/image/blob/main/docs/content/3.providers/shopify.md

How to configure the Shopify provider in your nuxt.config.ts file.

```APIDOC
## Shopify Provider Configuration

### Description
Configure the Shopify provider in your nuxt.config.ts to set the base URL for the Shopify CDN.

### Request Example
```ts
export default defineNuxtConfig({
  image: {
    shopify: {
      baseURL: 'https://cdn.shopify.com/',
    }
  }
})
```
```

--------------------------------

### Usage of NuxtImg before and after aliasing

Source: https://github.com/nuxt/image/blob/main/docs/content/1.get-started/2.configuration.md

Demonstrates how aliasing simplifies the NuxtImg component usage and the resulting HTML output.

```vue
<NuxtImg src="https://images.unsplash.com/<id>" />
```

```html
<img src="/_ipx/https://images.unsplash.com/<id>">
```

```vue
<NuxtImg src="/unsplash/<id>" />
```

```html
<img src="/_ipx/unsplash/<id>">
```

--------------------------------

### Configure Aliyun provider in nuxt.config.ts

Source: https://github.com/nuxt/image/blob/main/docs/content/3.providers/aliyun.md

Set the baseURL to your Aliyun service zone within the image configuration.

```ts
export default defineNuxtConfig({
  image: {
    aliyun: {
      baseURL: 'https://that-test.site'
    }
  }
})
```

--------------------------------

### Configure Picsum Provider

Source: https://github.com/nuxt/image/blob/main/docs/content/3.providers/picsum.md

Enable the Picsum provider in your Nuxt configuration file.

```typescript
export default defineNuxtConfig({
  image: {
    picsum: {}
  }
})
```

--------------------------------

### Use NuxtImg with Supabase

Source: https://github.com/nuxt/image/blob/main/docs/content/3.providers/supabase.md

Basic implementation of the NuxtImg component using the supabase provider.

```vue
<NuxtImg
  provider="supabase"
  src="/path/to/image.jpg"
  width="300"
  height="200"
/>
```

--------------------------------

### Use NuxtImg with Aliyun provider

Source: https://github.com/nuxt/image/blob/main/docs/content/3.providers/aliyun.md

Apply the aliyun provider to the NuxtImg component to serve images via Aliyun CDN.

```vue
<NuxtImg
  provider="aliyun"
  src="/burger.jpeg"
  height="300"
  :modifiers="{ fit: 'contain' }"
/>
```

--------------------------------

### Configure source image directory

Source: https://github.com/nuxt/image/blob/main/docs/content/1.get-started/2.configuration.md

Sets the directory for source images when using ipx or ipxStatic providers. Ensure the custom directory is included in your deployment.

```ts
export default defineNuxtConfig({
  image: {
    dir: 'assets/images'
  }
})
```

--------------------------------

### Configure image densities

Source: https://github.com/nuxt/image/blob/main/docs/content/1.get-started/2.configuration.md

Specify device pixel ratio values to support high-density displays like retina screens.

```ts
export default defineNuxtConfig({
  image: {
    densities: [1, 2, 3]
  }
})
```

--------------------------------

### Define a Custom Provider

Source: https://github.com/nuxt/image/blob/main/docs/content/4.advanced/1.custom-provider.md

Create an isomorphic provider that generates optimized image URLs using the defineProvider utility.

```ts
import { joinURL } from 'ufo'
import { createOperationsGenerator, defineProvider } from '@nuxt/image/runtime'

const operationsGenerator = createOperationsGenerator()

export default defineProvider<{ baseURL?: string }>({
  getImage (src, { modifiers, baseURL }) {
    if (!baseURL) {
      // also support runtime config 
      baseURL = useRuntimeConfig().public.siteUrl
    }

    const operations = operationsGenerator(modifiers)

    return {
      url: joinURL(baseURL, src + (operations ? '?' + operations : ''))
    }
  }
})
```

--------------------------------

### Define screen sizes

Source: https://github.com/nuxt/image/blob/main/docs/content/1.get-started/2.configuration.md

Set custom screen breakpoints to be used for generating resized and optimized images.

```ts
export default defineNuxtConfig({
  image: {
    // The screen sizes predefined by `@nuxt/image`:
    screens: {
      'sm': 640,
      'md': 768,
      'lg': 1024,
      'xl': 1280,
      '2xl': 1536
    }
  }
})
```

--------------------------------

### Basic Usage of NuxtImg

Source: https://github.com/nuxt/image/blob/main/docs/content/2.usage/1.nuxt-img.md

Use <NuxtImg> like a native <img> tag for basic image display. Ensure images are in the `public/` directory for the default provider.

```vue
<NuxtImg src="/nuxt-icon.png" />
```

```html
<img src="/nuxt-icon.png">
```

--------------------------------

### Upgrade Nuxt Image (npm)

Source: https://github.com/nuxt/image/blob/main/docs/content/1.get-started/1.installation.md

Use npm to upgrade the @nuxt/image package to its latest version.

```bash
npm up @nuxt/image
```

--------------------------------

### Overlay Text Transformation

Source: https://github.com/nuxt/image/blob/main/docs/content/3.providers/imagekit.md

Shows how to overlay text onto an image using the `raw` parameter with the `l-text` layer type. Allows customization of font size, color, background, and positioning.

```APIDOC
## Overlay Text

### Description
You can overlay text on an image and apply various transformations to it as per your needs.

### Method
Not Applicable (Configuration within NuxtImg component)

### Endpoint
Not Applicable (Configuration within NuxtImg component)

### Parameters
#### Modifiers
- **raw** (string) - Required - A string of layer transformations. For text overlay, it starts with `l-text` followed by text content and other transformation parameters, ending with `l-end`.
  - Example: `l-text,i-overlay made easy,fs-45,co-000000,bg-FFFFFF80,r-30,pa-40,l-end`

### Request Example
```vue
<template>
  <NuxtImg
    provider="imagekit"
    src="/default-image.jpg"
    :modifiers="modifiers"
  />
</template>

<script setup lang="ts">
const modifiers = {
  raw: 'l-text,i-overlay made easy,fs-45,co-000000,bg-FFFFFF80,r-30,pa-40,l-end'
}
</script>
```

### Response
#### Success Response (200)
An image with the specified text overlay applied.

#### Response Example
(Image URL with transformations applied)
```

--------------------------------

### Image Transformation Options

Source: https://github.com/nuxt/image/blob/main/docs/content/3.providers/sirv.md

A comprehensive list of available image transformation parameters and their corresponding configuration keys.

```APIDOC
## Image Transformation Parameters

This section outlines the various parameters that can be used to transform images.

### Parameters

- **colorizeColor** (string) - The color of the colorize option.
- **colorizeOpacity** (number) - Opacity of the color overlay.
- **colortone** (string) - Change the color tone of the image.
- **colortoneColor** (string) - Apply a color tone to an image.
- **colortoneLevel** (number) - Set the level of blending with the original image.
- **colortoneMode** (string) - Apply the color tone to the entire image or shadows/highlights only.
- **vignette** (number) - Adjust the depth of the vignette.
- **vignetteColor** (string) - Add a vignette (dark edges) around the image.
- **lightness** (number) - Change the lightness of the image.
- **colorlevelBlack** (number) - Adjust black level of image.
- **colorlevelWhite** (number) - Adjust white level of image.
- **histogram** (boolean) - Display a histogram of RGB levels.
- **hue** (number) - Change the hue of the image.
- **saturation** (number) - Change the saturation of the image.
- **highlights** (number) - Change the highlights of the image.
- **shadows** (number) - Change the shadows of the image.
- **brightness** (number) - Change the brightness of the image.
- **exposure** (number) - Change the exposure of the image.
- **contrast** (number) - Change the contrast of the image.
- **rotate** (number) - Number of degrees to rotate the image.
- **flip** (boolean) - Flip image vertically (mirror).
- **flop** (boolean) - Flip image horizontally (mirror).
- **opacity** (number) - Opacity of PNG images.
- **frameStyle** (string) - Add a frame around the image.
- **frameColor** (string) - Frame color e.g. E0AA80 or E0AA8020.
- **frameWidth** (number) - Frame width.
- **frameRimColor** (string) - Frame rim color e.g. E0AA80 or E0AA8020.
- **frameRimWidth** (number) - Frame rim width.
- **pdfPage** (number) - Page number of PDF when converted to image.

### Learn More

Refer to [Sirv's Image transformations](https://sirv.com/help/article/dynamic-imaging) for detailed information on these transformations.
```

--------------------------------

### Configure Cloudimage Provider

Source: https://github.com/nuxt/image/blob/main/docs/content/3.providers/cloudimage.md

Basic configuration for the Cloudimage provider using a token and baseURL.

```ts
export default defineNuxtConfig({
  image: {
    cloudimage: {
      token: 'your_cloudimage_token',
      baseURL: 'origin_image_url' // or alias (optional)
    }
  }
})
```

```ts
export default defineNuxtConfig({
  image: {
    cloudimage: {
      token: 'demo',
      baseURL: 'sample.li'
    }
  }
})
```

```ts
export default defineNuxtConfig({
  image: {
    cloudimage: {
      token: 'demo',
      baseURL: 'sample.li/images',
      baseURL: 'https://sample.li/images',
      baseURL: '_sl_' // alias defined in your Cloudimage storage settings
    }
  }
})
```

--------------------------------

### Opt out of Edge Channel (package.json)

Source: https://github.com/nuxt/image/blob/main/docs/content/1.get-started/1.installation.md

Update the @nuxt/image dependency in package.json to revert to a stable version to opt out of the edge release channel.

```diff
{
  "devDependencies": {
-   "@nuxt/image": "npm:@nuxt/image-nightly@latest"
+   "@nuxt/image": "^1.0.0"
  }
}
```

--------------------------------

### Apply Sampler Algorithm with Umbraco Provider

Source: https://github.com/nuxt/image/blob/main/docs/content/3.providers/umbraco.md

Specify the resampling algorithm for image resizing using the 'sampler' modifier with the Umbraco provider.

```vue
<NuxtImg
  provider="umbraco"
  src="/media/abcd1234/example.jpg"
  width="600"
  height="338"
  :modifiers="{ sampler: 'lanczos3' }"
/>
```

--------------------------------

### Upgrade Nuxt Image (bun)

Source: https://github.com/nuxt/image/blob/main/docs/content/1.get-started/1.installation.md

Use bun to update the @nuxt/image package to its latest version.

```bash
bun update @nuxt/image
```

--------------------------------

### NuxtImg preload prop

Source: https://github.com/nuxt/image/blob/main/docs/content/2.usage/1.nuxt-img.md

The `preload` prop allows you to preload an image by adding a corresponding `link` tag to the page's head. You can also pass an object to define the `fetchPriority` property.

```APIDOC
## NuxtImg preload prop

### Description
Use the `preload` prop to preload an image, which adds a `link` tag to the page's head. You can also pass an object to define the `fetchPriority` property, which maps to the HTML `fetchpriority` attribute. Accepted values for `fetchPriority` are `auto`, `high`, or `low`.

### Usage
```vue
<NuxtImg src="/nuxt-icon.png" preload />
<NuxtImg src="/nuxt-icon.png" :preload="{ fetchPriority: 'high' }" />
```
```

--------------------------------

### <NuxtImg> Props

Source: https://github.com/nuxt/image/blob/main/docs/content/2.usage/1.nuxt-img.md

Detailed explanation of the available props for the <NuxtImg> component, including `custom`, `src`, `width`, `height`, `alt`, `sizes`, and `densities`.

```APIDOC
## <NuxtImg> Props

### `custom`

#### Description
The `custom` prop determines if `<NuxtImg>` renders as a simple `<img>` or serves as a provider for custom rendering. When `true`, it disables default rendering, allowing full control. It passes `imgAttrs`, `src`, and `isLoaded` to its default slot.

#### Example Usage
```vue
<NuxtImg
  src="/images/nuxt.png"
  alt="image"
  width="400"
  height="400"
  :custom="true"
  v-slot="{ src, isLoaded, imgAttrs }"
>
  <img
    v-if="isLoaded"
    v-bind="imgAttrs"
    :src="src"
  />
  <img
    v-else
    src="https://placehold.co/400x400"
    alt="placeholder"
  />
</NuxtImg>
```

### `src`

#### Description
Path to the image file. For static images in the `public/` directory, use an absolute path. Otherwise, use a path expected by the provider (starting with `/`) or a URL. External URLs require whitelisting via the `domains` option.

#### Example Usage
```vue
<NuxtImg src="/nuxt.png" />
```

### `width` / `height`

#### Description
Specify the width and height of the image. Use desired dimensions for static images (icons, avatars) or original image dimensions for responsive images when using the `sizes` prop.

### `alt`

#### Description
Specifies alternate text for the image if it cannot be displayed. This is a native `<img>` attribute and should always be provided. Describe the image content or link destination, or use `alt=""` for decorative images.

#### Example Usage
```vue
<NuxtImg
  src="/nuxt.png"
  alt="My image file description"
/>
```

### `sizes`

#### Description
Defines responsive image sizes. This is a space-separated list of screen size/width pairs. Nuxt generates responsive-first sizing. If a screen size prefix (e.g., `sm:`) is omitted, it becomes the default size. Each specified size pair applies upwards (e.g., `md:400px` means 400px on `md` screens and larger).

#### Example Usage
```vue
<NuxtImg
  src="/logos/nuxt.png"
  sizes="100vw sm:50vw md:400px"
/>
```

### `densities`

#### Description
Provides high-resolution images for Retina/HiDPI screens by generating multiple versions at different pixel densities and creating the appropriate `srcset`. Nuxt Image multiplies base dimensions by each density value.

#### Example Usage
```vue
<NuxtImg 
  src="/nuxt.png"
  height="50"
  densities="x1 x2"
/>
```

#### Response Example
```html
<img
  src="/_ipx/w_50/nuxt.png"
  srcset="/_ipx/w_50/nuxt.png 1x,
          /_ipx/w_100/nuxt.png 2x"
/>
```
```

--------------------------------

### Set image format

Source: https://github.com/nuxt/image/blob/main/docs/content/2.usage/1.nuxt-img.md

Forces the image to be served in a specific format.

```vue
<NuxtImg
  format="webp"
  src="/nuxt-icon.png"
/>
```

--------------------------------

### Configure Filerobot Provider in nuxt.config.ts

Source: https://github.com/nuxt/image/blob/main/docs/content/3.providers/filerobot.md

Set the baseURL to your Filerobot project slug to enable the provider.

```ts
export default defineNuxtConfig({
  image: {
    filerobot: {
      baseURL: 'https://<slug>.filerobot.com/',
    },
  }
})
```

--------------------------------

### Serve Images in Multiple Formats with NuxtPicture

Source: https://github.com/nuxt/image/blob/main/docs/content/2.usage/2.nuxt-picture.md

Use the `format` prop to specify modern image formats. Nuxt Image will automatically generate these formats along with a legacy format for broader compatibility.

```vue
<NuxtPicture
  format="avif,webp"
  src="/nuxt-icon.png"
/>
```

--------------------------------

### Configure image URL aliases

Source: https://github.com/nuxt/image/blob/main/docs/content/1.get-started/2.configuration.md

Defines aliases for external domains to shorten URLs and simplify image source paths.

```ts
export default defineNuxtConfig({
  image: {
    domains: [
      'images.unsplash.com'
    ],
    alias: {
      unsplash: 'https://images.unsplash.com'
    }
  }
})
```

--------------------------------

### Preload Image with NuxtImg

Source: https://github.com/nuxt/image/blob/main/docs/content/2.usage/1.nuxt-img.md

Use the `preload` prop to place a `link` tag in the head for preloading the image. This is useful for above-the-fold content.

```vue
<NuxtImg src="/nuxt-icon.png" preload />
```

--------------------------------

### Configure ImageEngine Provider

Source: https://github.com/nuxt/image/blob/main/docs/content/3.providers/imageengine.md

Set the baseURL to your ImageEngine Delivery Address within the nuxt.config.ts file.

```ts
export default defineNuxtConfig({
  image: {
    imageengine: {
      baseURL: 'https://xxxxx.imgeng.in'
    }
  }
})
```

--------------------------------

### NuxtImg loading prop

Source: https://github.com/nuxt/image/blob/main/docs/content/2.usage/1.nuxt-img.md

The `loading` prop is a native attribute that provides a hint to the browser on how to handle the loading of an image outside the viewport. Set `loading="lazy"` to defer loading until the image appears in the viewport.

```APIDOC
## NuxtImg loading prop

### Description
The `loading` prop is a native HTML attribute that hints to the browser how to load images outside the viewport. Setting `loading="lazy"` defers image loading until it enters the viewport.

### Usage
```vue
<NuxtImg src="/nuxt-icon.png" loading="lazy" />
```
```

--------------------------------

### Basic Nuxt Image Configuration

Source: https://github.com/nuxt/image/blob/main/docs/content/1.get-started/1.installation.md

Add an 'image' section to your nuxt.config.ts file to configure the Nuxt Image module. Refer to the documentation for available options.

```typescript
export default defineNuxtConfig({
  image: {
    // Options
  }
})
```

--------------------------------

### Set default provider and modifiers

Source: https://github.com/nuxt/image/blob/main/docs/content/1.get-started/2.configuration.md

Configure the default provider and its specific modifiers or base URL settings.

```ts
export default defineNuxtConfig({
  image: {
    provider: 'twicpics',
    twicpics: {
      baseURL: 'https://nuxt-demo.twic.pics'
    }
  }
})
```

```ts
export default defineNuxtConfig({
  image: {
    provider: 'cloudinary',
    cloudinary: {
      baseURL: 'https://res.cloudinary.com/<company>/image/fetch',
      modifiers: {
        effect: 'sharpen:100',
        quality: 'auto:best'
      }
    }
  }
})
```

--------------------------------

### Configuring a custom CDN CNAME

Source: https://github.com/nuxt/image/blob/main/docs/content/3.providers/uploadcare.md

Override the default ucarecdn.com domain by specifying a custom cdnURL in the Nuxt configuration.

```ts
export default defineNuxtConfig({
  image: {
    uploadcare: {
      cdnURL: 'cdn.mycompany.com'
    }
  }
})
```

--------------------------------

### URL Alias Configuration (`alias`)

Source: https://github.com/nuxt/image/blob/main/docs/content/1.get-started/2.configuration.md

Specify aliases for image `src` attributes to shorten URLs, especially useful for external image sources. Aliases are resolved server-side for `ipx` provider and runtime for others.

```APIDOC
## `alias`

### Description
This option allows you to specify aliases for `src`. When using the default `ipx` provider, URL aliases are shortened on the server-side, which is useful for optimizing external URLs and not including them directly in HTML. When using other providers, aliases are resolved at runtime and included in HTML, simplifying usage.

### Configuration Example
```ts
// nuxt.config.ts
export default defineNuxtConfig({
  image: {
    domains: [
      'images.unsplash.com'
    ],
    alias: {
      unsplash: 'https://images.unsplash.com'
    }
  }
})
```

### Usage Example

**Before using alias:**
```vue
<NuxtImg src="https://images.unsplash.com/<id>" />
```

Generates:
```html
<img src="/_ipx/https://images.unsplash.com/<id>">
```

**After using alias:**
```vue
<NuxtImg src="/unsplash/<id>" />
```

Generates:
```html
<img src="/_ipx/unsplash/<id>">
```

Both usage and output are simplified.
```

--------------------------------

### Upgrade Nuxt Image (yarn)

Source: https://github.com/nuxt/image/blob/main/docs/content/1.get-started/1.installation.md

Use yarn to upgrade the @nuxt/image package to its latest version.

```bash
yarn upgrade @nuxt/image
```

--------------------------------

### Configure Nitro Prerender for Static Images

Source: https://github.com/nuxt/image/blob/main/docs/content/4.advanced/2.static-images.md

Use `nitro.prerender.routes` in `nuxt.config.ts` to pre-render image optimization routes when SSR is disabled for static site generation.

```typescript
export default defineNuxtConfig({
  ssr: false,
  nitro: {
    prerender: {
      routes: [
        '/_ipx/w_120/market.jpg',
        '/_ipx/w_140/market.jpg',
        // etc.
      ]
    }
  }
})
```

--------------------------------

### Configure Cloudimage with cdnURL

Source: https://github.com/nuxt/image/blob/main/docs/content/3.providers/cloudimage.md

Use cdnURL to override the default URL construction, useful for custom hostnames or when omitting a token.

```ts
export default defineNuxtConfig({
  image: {
    cloudimage: {
      cdnURL: 'https://demo.cloudimg.io/v7'
    }
  }
})
```

--------------------------------

### Configure Netlify Provider in Nuxt

Source: https://github.com/nuxt/image/blob/main/docs/content/3.providers/netlify.md

Set the image provider to 'netlify' in your Nuxt configuration file to enable Netlify's image optimization service.

```typescript
export default defineNuxtConfig({
  image: {
    provider: 'netlify'
  }
})
```

--------------------------------

### Configure ImageKit Provider

Source: https://github.com/nuxt/image/blob/main/docs/content/3.providers/imagekit.md

Set the ImageKit URL-endpoint in your nuxt.config.ts file to enable the provider.

```ts
export default defineNuxtConfig({
  image: {
    imagekit: {
      baseURL: 'https://ik.imagekit.io/your_imagekit_id'
    }
  }
})
```

--------------------------------

### Apply Image Overlay

Source: https://github.com/nuxt/image/blob/main/docs/content/3.providers/imagekit.md

Uses the raw parameter to overlay an image onto a base image with specific dimensions and positioning.

```vue
<template>
  <NuxtImg
    provider="imagekit"
    src="/default-image.jpg"
    :modifiers="modifiers"
  />
</template>

<script setup lang="ts">
const modifiers = {
  raw: 'l-image,i-default-image.jpg,w-300,h-200,b-5_FFFFFF,fo-top_left,l-end'
}
</script>
```

--------------------------------

### Display Remote Image with Cloudinary Fetch

Source: https://github.com/nuxt/image/blob/main/docs/content/3.providers/cloudinary.md

Use the NuxtImg component with the 'cloudinary' provider to display a remote image. Ensure 'Allowed fetch domains' are configured in Cloudinary.

```vue
<NuxtImg
  provider="cloudinary"
  src="https://upload.wikimedia.org/wikipedia/commons/a/ae/Olympic_flag.jpg"
  width="300"
  height="200"
/>
```

--------------------------------

### Set Image Format to WebP

Source: https://github.com/nuxt/image/blob/main/docs/content/3.providers/builderio.md

Use the `format` modifier to specify the image format. Supported formats include webp, jpg, png, gif, and original.

```vue
<NuxtImg src="..." width="300" height="300" modifiers="{ format: 'webp' }" />
```

--------------------------------

### Use Umbraco Provider with NuxtImg

Source: https://github.com/nuxt/image/blob/main/docs/content/3.providers/umbraco.md

Utilize the 'umbraco' provider with NuxtImg for rendering images served through Umbraco. Specify image source, dimensions, format, and quality.

```vue
<NuxtImg
  provider="umbraco"
  src="/media/abcd1234/example.jpg"
  width="800"
  height="450"
  format="webp"
  :quality="80"
/>
```

--------------------------------

### High-Resolution Images with NuxtImg Densities

Source: https://github.com/nuxt/image/blob/main/docs/content/2.usage/1.nuxt-img.md

Use the `densities` prop to serve high-resolution images for Retina/HiDPI screens. Nuxt Image generates multiple versions and the appropriate `srcset`.

```vue
<!-- Small icon, sharp on all screen densities -->
<NuxtImg 
  src="/nuxt.png"
  height="50"
  densities="x1 x2"
/>
```

```html
<!-- Rendered HTML -->
<img
  src="/_ipx/w_50/nuxt.png"
  srcset="/_ipx/w_50/nuxt.png 1x,
          /_ipx/w_100/nuxt.png 2x"
/>
```

--------------------------------

### Configure IPX Runtime Options in Nuxt

Source: https://github.com/nuxt/image/blob/main/docs/content/3.providers/ipx.md

Update IPX options at runtime by setting environment variables. This allows customization of baseURL, aliasing, and HTTP domain whitelisting.

```typescript
export default defineNuxtConfig({
  runtimeConfig: {
    ipx: {
      baseURL: process.env.NUXT_IPX_BASE_URL || '/_ipx',
      alias: {
        someAlias: process.env.NUXT_IPX_ALIAS_SOME_ALIAS || ''
      },
      http: {
        domains: process.env.NUXT_IPX_HTTP_DOMAINS,
      },
    },
  },
})
```

--------------------------------

### Configure Cloudinary Fetch Base URL

Source: https://github.com/nuxt/image/blob/main/docs/content/3.providers/cloudinary.md

Configure the base URL for Cloudinary's fetch mode. This allows Nuxt Image to fetch remote images directly.

```typescript
export default defineNuxtConfig({
  image: {
    cloudinary: {
      baseURL: 'https://res.cloudinary.com/<your-cloud-name>/image/fetch'
    }
  }
})
```

--------------------------------

### Configure Allowed Image Formats for Vercel

Source: https://github.com/nuxt/image/blob/main/docs/content/3.providers/vercel.md

Use the `vercel.formats` option in `nuxt.config.ts` to specify an allow list of image formats for optimization. By default, the provider supports 'image/webp' and 'image/avif'.

```typescript
export default defineNuxtConfig({
  image: {
    vercel: {
      formats: ['image/webp']
    }
  }
})
```

--------------------------------

### Configure Sirv Provider

Source: https://github.com/nuxt/image/blob/main/docs/content/3.providers/sirv.md

Set the Sirv baseURL in the Nuxt Image module configuration to enable the provider.

```ts
export default defineNuxtConfig({
  image: {
    sirv: {
      baseURL: 'https://youralias.sirv.com'
    }
  }
})
```

--------------------------------

### Search for removed breakpoints

Source: https://github.com/nuxt/image/blob/main/docs/content/1.get-started/5.migration.md

Use grep to identify usage of the removed 'xs' and 'xxl' breakpoints in your project.

```bash
grep -r "sizes.*xs:" --include="*.vue"
grep -r "sizes.*xxl:" --include="*.vue"
```

--------------------------------

### Configure Whitelisted Domains

Source: https://github.com/nuxt/image/blob/main/docs/content/3.providers/aws-amplify.md

Whitelist external hostnames in nuxt.config.ts to allow image optimization from non-public directories.

```ts
export default defineNuxtConfig({
  image: {
    domains: ['avatars0.githubusercontent.com']
  }
})
```

--------------------------------

### Add Nonce for Content Security Policy

Source: https://github.com/nuxt/image/blob/main/docs/content/2.usage/1.nuxt-img.md

Use the `nonce` prop to provide a cryptographic nonce for Content Security Policy. This helps avoid the `unsafe-inline` directive.

```vue
<template>
  <NuxtImg
    src="/nuxt-icon.png"
    :nonce="nonce"
  />
</template>

<script setup lang="ts">
// useNonce is not provided by @nuxt/image but might be
// provided by another module, for example nuxt-security
const nonce = useNonce()
</script>
```

--------------------------------

### Define and use image presets

Source: https://github.com/nuxt/image/blob/main/docs/content/2.usage/1.nuxt-img.md

Uses predefined sets of image modifiers defined in the nuxt.config.

```vue
<template>
  <NuxtImg preset="cover" src="/nuxt-icon.png" />
</template>
```

```ts
export default defineNuxtConfig({
  image: {
    presets: {
      cover: {
        modifiers: {
          fit: 'cover',
          format: 'jpg',
          width: 300,
          height: 300
        }
      }
    }
  }
})
```

--------------------------------

### Configure Supabase Provider

Source: https://github.com/nuxt/image/blob/main/docs/content/3.providers/supabase.md

Set the baseURL in your nuxt.config.ts to point to your Supabase project's storage render endpoint.

```ts
export default defineNuxtConfig({
  image: {
    supabase: {
      baseURL: 'https://<project-id>.supabase.co/storage/v1/render/image/public/<bucket-name>'
    }
  }
})
```

--------------------------------

### Configure Bunny Provider in nuxt.config.ts

Source: https://github.com/nuxt/image/blob/main/docs/content/3.providers/bunny.md

Set the base URL for the Bunny provider within the Nuxt configuration file.

```ts
export default defineNuxtConfig({
  image: {
    bunny: {
      baseURL: ''
    }
  }
})
```