matijao/webdev huggingface dataset:
Static Images - Nuxt Image

Advanced

Static Images

Optimizing images for static websites.

If you are building a static site using nuxt generate, Nuxt Image will optimize and save your images locally when your site is generated - and deploy them alongside your generated pages.

If you disabled server-side rendering (ssr: false in the nuxt.config), Nuxt Image won't be able to optimize your images during the static generation process.

In that case, you can tell Nuxt to pre-render images by using the nitro.prerender.routes option:

export default defineNuxtConfig({

  ssr: false,

  nitro: {

    prerender: {

      routes: [

        '/_ipx/w_120/market.jpg',

        '/_ipx/w_140/market.jpg',

        // etc.

      ]

    }

  }

})


Custom Provider

If a CDN provider is not supported, you can define it yourself.
Custom Provider - Nuxt Image

Advanced

Custom Provider

If a CDN provider is not supported, you can define it yourself.

Provider Entry

The runtime will receive a source, image modifiers and its provider options. It is responsible for generating a url for optimized images, and needs to be isomorphic because it may be called on either server or client.

providers/my-provider.ts
import { joinURL } from 'ufo'

import type { ProviderGetImage } from '@nuxt/image'

import { createOperationsGenerator } from '#image'



const operationsGenerator = createOperationsGenerator()



export const getImage: ProviderGetImage = (

  src,

  { modifiers = {}, baseURL } = {}

) => {



  if (!baseURL) {

    // also support runtime config 

    baseURL = useRuntimeConfig().public.siteUrl

  }



  const operations = operationsGenerator(modifiers)



  return {

    url: joinURL(baseURL, src + (operations ? '?' + operations : '')),

  }

}

Parameters
src: Source path of the image.
modifiers: List of image modifiers that are defined in the image component or as a preset.
ctx: (ImageCTX) Image module runtime context
options: (CreateImageOptions) Image module global runtime options
$img: The $img helper

Note: Values in ctx might change. Use it with caution.

Return
url: Absolute or relative url of optimized image.
Use your provider
Register provider

After you create your own provider, you should register it in the nuxt.config. In order to do that create a property inside image.provider.

nuxt.config.ts
export default defineNuxtConfig({

  // ...

  image: {

    providers: {

      myProvider: {

        name: 'myProvider', // optional value to overrider provider name

        provider: '~/providers/my-provider.ts', // Path to custom provider

        options: {

          // ... provider options

          baseURL: "https://site.com"

        }

      }

    }

  }

})


There are plenty of useful utilities that can be used to write providers by importing from #image. See src/runtime/providers for more info.

Usage

Set attribute provider as your custom provider name.

pages/index.vue
<NuxtImg provider="myProvider" src="/image.png" >

<!-- <img src="https://site.com/image.png" /> -->


Vercel

Optimize images at Vercel's Edge Network.

Static Images

Optimizing images for static websites.
Vercel - Nuxt Image Providers

Providers

Vercel
Source

Optimize images at Vercel's Edge Network.

When deploying your nuxt applications to Vercel platform, image module can use Vercel's Edge Network to optimize images on demand.

This provider will be enabled by default in vercel deployments.

Domains

To use external URLs (images not in public/ directory), hostnames should be whitelisted.

Example:

nuxt.config
export default {

  image: {

    domains: [

      'avatars0.githubusercontent.com'

    ]

  }

}

Sizes

Specify any custom width property you use in <NuxtImg>, <NuxtPicture> and $img.

If a width is not defined, image will fallback to the next bigger width.

Example:

nuxt.config
export default {

  image: {

    screens: {

      icon: 40,

      avatar: 24

    }

  }

}


Uploadcare

Power up file uploading, processing and delivery for your app in one sitting.

Custom Provider

If a CDN provider is not supported, you can define it yourself.
Uploadcare - Nuxt Image Providers

Providers

Uploadcare
Source

Power up file uploading, processing and delivery for your app in one sitting.

Integration between Uploadcare and the Nuxt Image module.

Usage

To use images from uploadcare, specify the provider as uploadcare and set the image src to the UUID provided on the dashboard.

page.vue
<NuxtImg

  provider="uploadcare"

  src="c160afba-8b42-45a9-a46a-d393248b0072"

  alt="My image from uploadcare"

/>

Modifiers

To see all possible modifiers and their options, check out the image transformations documentation or the URL API Reference.

Types are provided for the following modifiers:

src/types/module.ts
  // Image Compression

  format: 'jpeg' | 'png' | 'webp' | 'auto'

  quality: 'smart' | 'smart_retina' | 'normal' | 'better' | 'best' | 'lighter' | 'lightest'

  progressive: 'yes' | 'no'

  strip_meta: 'all' | 'none' | 'sensitive'



  // Image Geometry

  preview: `${number}x${number}` // Height x Width

  resize: `${number}x${number}` | `${number}x`| `x${number}` 

  smart_resize: `${number}x${number}`

  crop: string | string[]

  scale_crop: string | string[]

  border_radius: string | string[]

  setfill: string // 3, 6 or 8 digit hex color

  zoom_objects: string // 1 to 100


Please feel free to open a PR to improve support for additional operations.

Configuration

By default, all file URLs use the ucarecdn.com domain. By setting a custom CDN CNAME, file URLs can use cdn.mycompany.com instead.

See the Uploadcare documentation for how to enable a custom domain in your project. To tell Nuxt Image about the custom CDN name, use the following configuration:

nuxt.config.ts
export default defineNuxtConfig({

  image: {

    uploadcare: {

      cdnURL: 'cdn.mycompany.com',

    }

  }

})


Unsplash

Nuxt Image has first class integration with Unsplash.

Vercel

Optimize images at Vercel's Edge Network.
Unsplash - Nuxt Image Providers

Providers

Unsplash
Source

Nuxt Image has first class integration with Unsplash.

Integration between Unsplash and the image module. See Unsplash License for what usage is permitted.

Dynamically resizable images

Every image returned by the Unsplash API is a dynamic image URL, which means that it can be manipulated to create new transformations of the image by simply adjusting the query parameters of the image URL.

This enables resizing, cropping, compression, and changing the format of the image in realtime client-side, without any API calls.

Under the hood, Unsplash uses Imgix, a powerful image manipulation service to provide dynamic image URLs.

Supported parameters

Unsplash officially support the parameters:

w, h: for adjusting the width and height of a photo
crop: for applying cropping to the photo
fm: for converting image format
auto=format: for automatically choosing the optimal image format depending on user browser
q: for changing the compression quality when using lossy file formats
fit: for changing the fit of the image within the specified dimensions
dpr: for adjusting the device pixel ratio of the image

The other parameters offered by Imgix can be used, but we don’t officially support them and may remove support for them at any time in the future.

💫 Tip The API returns image URLs containing an ixid parameter. All resizing and manipulations of image URLs must keep this parameter as it allows for your application to report photo views and be compliant with the API Guidelines.

Twicpics

Nuxt Image internally use Twicpics as static provider.

Uploadcare

Power up file uploading, processing and delivery for your app in one sitting.
Strapi - Nuxt Image Providers

Providers

Strapi
Source

Nuxt Image with Strapi integration.

Integration between Strapi and the image module.

No specific configuration is required. You just need to specify strapi in your configuration to make it the default:

nuxt.config.ts
export default defineNuxtConfig({

  image: {

    strapi: {}

  }

})


Override default options:

nuxt.config.ts
export default defineNuxtConfig({

  image: {

    strapi: {

      baseURL: 'http://localhost:1337/uploads/'

    }

  }

})

Modifiers

The breakpoint modifier is used to specify the size of the image.

By default, when the image is uploaded and Enable responsive friendly upload Strapi setting is enabled in the settings panel the plugin will generate the following responsive image sizes:

Name	Largest Dimension
small	500px
medium	750px
large	1000px

You can override the default breakpoints. See the Upload configuration in the Strapi documentation.

If you don't set breakpoint modifier, the original image size will be used:

<NuxtImg provider="strapi" src="..." />


Define breakpoint modifier:

<NuxtImg provider="strapi" src="..." :modifiers="{ breakpoint: 'small' }" />

Only one breakpoint can be modified per image.

Storyblok

Nuxt Image internally use Storyblok as static provider.

Twicpics

Nuxt Image internally use Twicpics as static provider.
Prepr - Nuxt Image Providers

Providers

Prepr
Source

Nuxt Image integration with Prepr CMS.

Integration between Prepr and Nuxt Image.

To use this provider you just need to specify the projectName of your project in Prepr.

nuxt.config.ts
export default defineNuxtConfig({

  image: {

    prepr: {

      // E.g.: https://YourProjectName.prepr.io/

      projectName: 'YourProjectName',

    }

  }

})

Modifiers

The Prepr provider supports a number of additional modifiers. For a full list, check out the Prepr documentation. All current transformations currently mentioned in Prepr docs are supported.

For the time being you might find the following links useful:

Assets Resizing via REST API
Understanding your marketing and design team workflows
prepr.io does not provide a way to restrict what domains can request assets to your project's CDN, nor limit the maximum size in pixels or bytes of images that are served from the CDN.
Convenience key modifiers

The following more readable modifiers are supported, in addition to Prepr's native modifiers:

crop is equivalent to c
format is equivalent to format
height is equivalent to h
quality is equivalent to q
width is equivalent to w
fit

In addition to the values specified in the Prepr docs, which are respected, the following options from the default fit behavior are supported:

cover - this will behave like the Prepr modifier crop, when passed without a value (defaults to centre)
For the time being, other fit options are not supported by this provider.

Netlify

Optimize images with Netlify's dynamic image transformation service.

Prismic

Nuxt Image has first class integration with Prismic.
Sanity - Nuxt Image Providers

Providers

Sanity
Source

Nuxt Image has first class integration with Sanity.

Integration between Sanity and Nuxt Image.

To use this provider you just need to specify the projectId of your project in Sanity.

nuxt.config.ts
export default defineNuxtConfig({

  image: {

    sanity: {

      projectId: 'yourprojectid',

      // Defaults to 'production'

      // dataset: 'development'

    }

  }

})

Modifiers

The Sanity provider supports a number of additional modifiers. For a full list, check out the Sanity documentation. All of the modifiers mentioned in the Sanity docs are supported, with the following notes.

Extra convenience modifiers

The following more readable modifiers are also supported:

background - equivalent to bg
download - equivalent to dl
sharpen - equivalent to sharp
orientation - equivalent to or
minHeight or min-height - equivalent to min-h
maxHeight or max-height - equivalent to max-h
minWidth or min-width - equivalent to min-w
maxWidth or max-width - equivalent to max-w
saturation - equivalent to sat
fit

In addition to the values specified in the Sanity docs, which are respected, the following options from the default fit behavior are supported:

cover - this will behave like the Sanity modifier crop
contain - this will behave like the Sanity modifier fill, and defaults to filling with a white background. (You can specify your own background color with the background modifier.)
inside - this will behave like the Sanity modifier min
outside - this will behave like the Sanity modifier max
fill - this will behave like the Sanity modifier scale
For compatibility with other providers, fit: fill is equivalent to the Sanity parameter ?fit=scale. If you need the Sanity ?fit=fill behavior, use fit: contain instead.
format

You can specify any of the formats suppored by Sanity. If this is omitted, the Sanity provider will default to auto=format.

crop and hotspot

You can pass your Sanity crop and hotspot image data as modifiers and Nuxt Image will correctly generate the rect, fp-x and fp-y parameters for you.

Prismic

Nuxt Image has first class integration with Prismic.

Sirv

Nuxt Image integration with Sirv media management, transformation and delivery platform.
Prismic - Nuxt Image Providers

Providers

Prismic
Source

Nuxt Image has first class integration with Prismic.

Integration between Prismic and the image module.

No specific configuration is required for Prismic support. You just need to specify provider: 'prismic' in your configuration to make it the default:

nuxt.config.ts
export default defineNuxtConfig({

  image: {

    prismic: {}

  }

})


You can also pass it directly to your component when you need it, for example:

*.vue
<NuxtImg provider="prismic" src="..." />

Prismic allows content writer to manipulate images through its UI (cropping, rezising, etc.). To preserve that behavior this provider does not strip query parameters coming from Prismic. Instead it only overrides them when needed, keeping developers in control.

Prepr

Nuxt Image integration with Prepr CMS.

Sanity

Nuxt Image has first class integration with Sanity.
Netlify - Nuxt Image Providers

Providers

Netlify
Source

Optimize images with Netlify's dynamic image transformation service.

Netlify offers dynamic image transformation for all JPEG, PNG, and GIF files you have set to be tracked with Netlify Large Media.

Before setting provider: 'netlify', make sure you have followed the steps to enable Netlify Large Media.
Modifiers

In addition to height and width, the Netlify provider supports the following modifiers:

fit
Default: contain
Valid options: contain (equivalent to nf_resize=fit) and fill (equivalent to nf_resize=smartcrop)

IPX

IPX is the built-in and self hosted image optimizer for Nuxt Image.

Prepr

Nuxt Image integration with Prepr CMS.
Imgix - Nuxt Image Providers

Providers

Imgix
Source

Nuxt Image has first class integration with Imgix.

Integration between Imgix and the image module.

To use this provider you just need to specify the base url of your service in Imgix.

nuxt.config.ts
export default defineNuxtConfig({

  image: {

    imgix: {

      baseURL: 'https://assets.imgix.net'

    }

  }

})

imgix fit values

Beside the standard values for fit property of Nuxt image and Nuxt picture, imgix offers the following for extra resizing experience:

clamp - Resizes the image to fit within the width and height dimensions without cropping or distorting the image, and the remaining space is filled with extended pixels from the edge of the image. The resulting image will match the constraining dimensions. The pixel extension is called an affine clamp, hence the value name, "clamp".
clip - The default fit setting for imgix images. Resizes the image to fit within the width and height boundaries without cropping or distorting the image. The resulting image will match one of the constraining dimensions, while the other dimension is altered to maintain the same aspect ratio of the input image.
facearea - Finds the area containing all faces, or a specific face in an image, and scales it to specified width and height dimensions. Can be used in conjunction with faceindex to identify a specific face, as well as facepad to include additional padded area around the face to zoom out from the immediate area around the faces.
fillMax - Resizes the image to fit within the requested width and height dimensions while preserving the original aspect ratio and without discarding any original image data. If the requested width or height exceeds that of the original, the original image remains the same size. The excess space is filled with a solid color or blurred version of the image. The resulting image exactly matches the requested dimensions.
imgix modifiers

Beside the standard modifiers, you can also pass all imgix-specific render API parameters to the modifiers prop.

For a full list of these modifiers and their uses, check out imgix's image Rendering API documentation.

imgix best practices

Some common best practices when using imgix, would be to include our auto parameter, which will automatically apply the best format for an image and compress the image as well. Combine this with some top of intelligent cropping and resizing and you will have a great image!

<NuxtImg

  provider="imgix"

  src="/blog/woman-hat.jpg"

  width="300"

  height="500"

  fit="cover"

  :modifiers="{ auto: 'format,compress', crop: 'faces' }"

/>


This will return a 300 x 500 image, which has been compressed, will display next-gen formats for a browser, and has been cropped intelligently to the face of the woman in the hat.

Additional Documentation

You can find additional documentation and a step-by-step tutorial in an imgix blog article titled Using the New Nuxt Component with imgix.

ImageKit

Nuxt Image has first class integration with ImageKit.

IPX

IPX is the built-in and self hosted image optimizer for Nuxt Image.
IPX - Nuxt Image Providers

Providers

IPX
Source

IPX is the built-in and self hosted image optimizer for Nuxt Image.

Nuxt Image comes with a preconfigured instance of unjs/ipx. An open source, self-hosted image optimizer based on lovell/sharp.

Additional Modifiers

You can use additional modifiers supported by IPX.

Example:

<NuxtImg src="/image.png" :modifiers="{ grayscale: true, tint: '#00DC82' }" />


Imgix

Nuxt Image has first class integration with Imgix.

Netlify

Optimize images with Netlify's dynamic image transformation service.
ImageEngine - Nuxt Image Providers

Providers

ImageEngine
Source

Nuxt Image has first class integration with ImageEngine.

Integration between ImageEngine and the image module.

At a minimum, you must configure the imageengine provider with the baseURL set to your ImageEngine Delivery Address:

nuxt.config.ts
export default defineNuxtConfig({

  image: {

    imageengine: {

      baseURL: 'https://xxxxx.imgeng.in'

    }

  }

})

ImageEngine fit values

The standard values for fit property map onto ImageEngine Directives as follows:

cover: m_cropbox
contain: m_letterbox
fill: m_stretch
inside: m_box, this is the default fit method for the ImageEngine provider.
outside: This fit method is not supported and functions the same as inside.
ImageEngine modifiers

In addition to the standard modifiers, you can also use all ImageEngine Directives by adding them to the modifiers property with the following attribute names:

format: f directive
fit: m directive
passThrough: pass directive
sharpen: s directive
rotate: r directive
screenPercent: pc directive
crop: cr directive
inline: in directive
metadata: meta directive

Note that the standard quality attribute is converted to the ImageEngine cmpr compression directive. quality is the opposite of compression, so 80% quality equals 20% compression. Since ImageEngine automatically adapts image quality the visitor's device, browser and network quality, it is recommended that you do not explicitly set the quality. If you want to completely disable all optimizations to an image, you should use :modifiers="{ passThrough: 'true' }", which will serve the unaltered image.

Example 1: Cropping an image to a width and height of 100x80, starting 10 pixels from the top and 20 pixels from the left:

<NuxtImg

  provider="imageengine"

  src="/some-image.jpg"

  width="100"

  height="80"

  :modifiers="{ cr: '100,80,10,20' }"

/>


Example 2: Instruct ImageEngine to keep the image's EXIF metadata (which is normally removed to reduce the image byte size):

<NuxtImg

  provider="imageengine"

  src="/some-image.jpg"

  width="100"

  height="80"

  :modifiers="{ meta: 'true' }"

/>

ImageEngine best practices
Automatic format and quality detection

ImageEngine automatically detects the best format and quality for your image based on the characteristics of the specific device that requested it.

This feature is very effective and it is not recommended that you disable it, but if you must, you can manually specify the format (ex: format='webp') and quality (quality='80').

ImageEngine settings

ImageEngine allows you to set all of the modifiers/directives in the ImageEngine control panel under advanced settings. This is a good place to set default adjustments since you can modify them without having to make changes to your Nuxt codebase. If a directive is set in both Nuxt and the ImageEngine User-Adjustable Settings, the value in Nuxt takes priority.

Gumlet

Nuxt Image has first class integration with Gumlet.

ImageKit

Nuxt Image has first class integration with ImageKit.
Gumlet - Nuxt Image Providers

Providers

Gumlet
Source

Nuxt Image has first class integration with Gumlet.

Integration between Gumlet and the image module.

To use this provider you just need to specify the base url of your service in Gumlet.

nuxt.config.ts
export default defineNuxtConfig({

  image: {

    gumlet: {

      baseURL: 'https://demo.gumlet.io'

    }

  }

})

gumlet mode values

Gumlet supports all the the standard values for fit property of Nuxt image and Nuxt picture.

gumlet modifiers

Beside the standard modifiers, you can also pass all gumlet-specific render API parameters to the modifiers prop.

For a full list of these modifiers and their uses, check out Gumlet's image Rendering API documentation.

gumlet best practices

Some common best practices when using Gumlet, would be to include our format=auto parameter, which will automatically apply the best format for an image and compress the image as well. Combine this with some top of intelligent cropping and resizing and you will have a great image!

<NuxtImg

  provider="gumlet"

  src="/sea.jpeg"

  width="300"

  height="500"

  fit="cover"

  :modifiers="{ format: 'auto', compress: 'true' }"

/>


This will return a 300 x 500 image, which has been compressed, will display next-gen formats for a browser, and has been cropped intelligently to the face of the woman in the hat.

Glide

Nuxt Image has first class integration with Glide.

ImageEngine

Nuxt Image has first class integration with ImageEngine.
Glide - Nuxt Image Providers

Providers

Glide
Source

Nuxt Image has first class integration with Glide.

Integration between Glide and the image module.

To use this provider you just need to specify the base url of your service in glide.

nuxt.config.ts
export default defineNuxtConfig({

  image: {

    glide: {

      // baseURL of your laravel application

      baseURL: 'https://glide.herokuapp.com/1.0/'

    }

  }

})


Fastly

Nuxt Image has first class integration with Fastly.

Gumlet

Nuxt Image has first class integration with Gumlet.
Fastly - Nuxt Image Providers

Providers

Fastly
Source

Nuxt Image has first class integration with Fastly.

Integration between Fastly and the image module.

To use this provider you just need to specify the base url of your service in Fastly.

nuxt.config.ts
export default defineNuxtConfig({

  image: {

    fastly: {

      baseURL: 'https://www.fastly.io'

    }

  }

})


Edgio

Optimize images with Edgio (formerly Layer0)'s optimization service.

Glide

Nuxt Image has first class integration with Glide.
Edgio - Nuxt Image Providers

Providers

Edgio
Source

Optimize images with Edgio (formerly Layer0)'s optimization service.

Edgio provides a simple HTTP service for optimizing images.

The image optimizer will only return an optimized image for mobile browsers. Desktop browsers are served the original image.

This integration works out of the box without need to configure! See the Documentation for more information.

Example:

<NuxtImg provider="edgio" src="https://i.imgur.com/LFtQeX2.jpeg" width="200" height="200" quality="80" />

Modifiers

Edgio supports the following modifiers: height, width and quality

Options
baseURL
Default: https://opt.moovweb.net

Directus

Nuxt Image with Directus integration.

Fastly

Nuxt Image has first class integration with Fastly.
Directus - Nuxt Image Providers

Providers

Directus
Source

Nuxt Image with Directus integration.

Integration between Directus and the image module.

To use this provider you just need to specify the base URL of your project.

nuxt.config.ts
export default defineNuxtConfig({

  image: {

    directus: {

      // This URL needs to include the final `assets/` directory

      baseURL: 'http://localhost:8055/assets/',

    }

  }

})


You can easily override default options:

nuxt.config.ts
export default defineNuxtConfig({

  image: {

    directus: {

      baseURL: 'http://mydirectus-domain.com/assets/',

      modifiers: {

        withoutEnlargement: 'true',

        transforms: [['blur', 4], ['negate']]

      }

    }

  }

})

Modifiers

All the default modifiers from Directus documentation are available.

<NuxtImg

  provider="directus"

  src="ad514db1-eb90-4523-8183-46781437e7ee"

  height="512"

  fit="inside"

  quality="20"

  :modifiers="{ withoutEnlargement: 'true' }"

/>


Since Directus exposes the full sharp API through the transforms parameter, we can use it inside our modifiers prop:

<NuxtImg

  provider="directus"

  src="ad514db1-eb90-4523-8183-46781437e7ee"

  :modifiers="{ height: '512', withoutEnlargement: 'true', transforms: [['blur', 4], ['negate']] }"

/>

Note that the transforms parameter, as stated in the Directus documentation, is basically a list of lists. This is to facilitate the use of those sharp functions, like normalise, that would need multiple values in input: transforms: [['normalise', 1, 99], ['blur', 4], ['negate']].

Contentful

Nuxt Image has first class integration with Contentful.

Edgio

Optimize images with Edgio (formerly Layer0)'s optimization service.
Contentful - Nuxt Image Providers

Providers

Contentful
Source

Nuxt Image has first class integration with Contentful.

Integration between Contentful and the image module.

To use this provider you just need to specify the base url of your service in Contentful.

nuxt.config.ts
export default defineNuxtConfig({

  image: {

    contentful: {}

  }

})


Cloudinary

Nuxt Image has first class integration with Cloudinary.

Directus

Nuxt Image with Directus integration.
Cloudimage - Nuxt Image Providers

Providers

Cloudimage
Source

Nuxt Image has first class integration with Cloudimage.

Integration between Cloudimage and the image module.

To use this provider you need to specify your Cloudimage token and the baseURL of your image storage.

nuxt.config.ts
export default defineNuxtConfig({

  image: {

    cloudimage: {

      token: 'your_cloudimage_token',

      baseURL: 'origin_image_url' // or alias

    }

  }

})

Options
token
Type: String (required)

Your Cloudimage customer token. Register for a Cloudimage account to get one. Registration takes less than a minute and is totally free.

baseURL
Type: String (required)

Your origin image URL or storage alias that allows to shorten your origin image URLs.

nuxt.config.ts
export default defineNuxtConfig({

  image: {

    cloudimage: {

      token: 'demo',

      baseURL: 'sample.li'

    }

  }

})


These formats all work as well:

nuxt.config.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

    }

  }

})

apiVersion
Type: String
Default: empty string

Allow using a specific version of the API.

For tokens created before 20.10.2021, apiVersion needs to be set to v7.

Here's an official demo config. demo is an old token hence apiVersion needs to be defined as well.

nuxt.config.ts
export default defineNuxtConfig({

  image: {

    cloudimage: {

      token: 'demo',

      baseURL: 'sample.li',

      apiVersion: 'v7'

    }

  }

})

cdnURL
Type: String
Default: https://{token}.cloudimg.io/{apiVersion}

Replaces the dynamically built URL

nuxt.config.ts
export default defineNuxtConfig({

  image: {

    cloudimage: {

      cdnURL: 'https://demo.cloudimg.io/v7',

    }

  }

})

Cloudimage modifiers

Beside the standard modifiers, also you can pass Cloudimage-specific Cloudimage-specific transformation params to modifiers prop.

Cloudimage fit values

Beside the standard values for fit property of Nuxt image and Nuxt picture, Cloudimage offers the following for extra resizing params:

crop - Crops the image to specified dimensions (width and height) and keeps proportions.
face - Crops the image automatically keeping the most prominent face.
fit - Resizes the image to fit into a specified width and height box, adds padding (image or solid colour) to keep proportions.
cropfit - Sets crop or fit resize mode depending on the origin and the desired dimensions.
bound - Resizes to a given width and height box and keeps proportions. Similar to fit but without adding padding.
boundmin - Resizes an image while bounding the smaller dimension to the desired width or height while keeping proportions.

Cloudflare

Nuxt Image has first class integration with Cloudflare.

Cloudinary

Nuxt Image has first class integration with Cloudinary.
AWS Amplify - Nuxt Image Providers

Providers

AWS Amplify
Source

Nuxt Image has first class integration with AWS Amplify Hosting

Integration between AWS Amplify Hosting and the image module.

This provider will be enabled by default in AWS Amplify deployments.

This is an experimental preset and will be available soon! 🚀

Domains

To use external URLs (images not in public/ directory), hostnames should be whitelisted.

Example:

nuxt.config
export default {

  image: {

    domains: [

      'avatars0.githubusercontent.com'

    ]

  }

}

Sizes

Specify any custom width property you use in <NuxtImg>, <NuxtPicture> and $img.

If a width is not defined, image will fallback to the next bigger width.

Example:

nuxt.config
export default {

  image: {

    screens: {

      icon: 40,

      avatar: 24

    }

  }

}


Aliyun

Nuxt Image has first class integration with Aliyun.

Cloudflare

Nuxt Image has first class integration with Cloudflare.
Cloudflare - Nuxt Image Providers

Providers

Cloudflare
Source

Nuxt Image has first class integration with Cloudflare.

Integration between Cloudflare and the image module.

To use this provider you just need to specify the base url (zone) of your service:

nuxt.config.ts
export default defineNuxtConfig({

  image: {

    cloudflare: {

      baseURL: 'https://that-test.site'

    }

  }

})


Example:

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

Options
baseURL

Default: /

Your deployment's domain (zone).

Note: /cdn-cgi/image/ will be automatically appended for generating URLs.

AWS Amplify

Nuxt Image has first class integration with AWS Amplify Hosting

Cloudimage

Nuxt Image has first class integration with Cloudimage.
Aliyun - Nuxt Image Providers

Providers

Aliyun
Source

Nuxt Image has first class integration with Aliyun.

Integration between Aliyun CDN and the image module.

To use this provider you just need to specify the base url (zone) of your service:

nuxt.config.ts
export default defineNuxtConfig({

  image: {

    aliyun: {

      baseURL: "https://that-test.site",

    },

  },

});


Example:

<NuxtImg

  provider="aliyun"

  src="/burger.jpeg"

  height="300"

  :modifiers="{ fit: 'contain' }"

/>

Options
baseURL

Default: /

Your deployment's domain (zone).

modifiers

Example:

{

  resize: {

    fw: 900,

    fh: 200

  },

  rotate:180,

  bright:50

  ...

}


For more modifiers configuration items, see aliyun cdn docs

useImage()

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

AWS Amplify

Nuxt Image has first class integration with AWS Amplify Hosting
useImage() - Nuxt Image

Usage

useImage()
Source

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
const img = useImage()



img(src, modifiers, options)


Example: Generate image URL for backgroundImage style.

const img = useImage()

const backgroundStyles = computed(() => {

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

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

})

img.getSizes
const img = useImage()



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

Unstable: getSizes API might change or be removed.

Parameters:

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

    }

  })

})

</script>



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

  ></v-img>

</template>


<NuxtPicture>

Discover how to use and configure the Nuxt Picture component.

Aliyun

Nuxt Image has first class integration with Aliyun.
<NuxtPicture> - Nuxt Image

Usage

<NuxtPicture>
Source

Discover how to use and configure the Nuxt Picture component.

<NuxtPicture> is a drop-in replacement for the native <picture> tag.

Usage of <NuxtPicture> is almost identical to <NuxtImg> but also allows serving modern formats like webp when possible.

Learn more about the <picture> tag on MDN.

Props
See props supported by<NuxtImg>
format

Format on pictures can be used to serve images in multiple formats. A legacy format will be generated automatically. So in the example below avif, webp and png would be generated. They will be added in the same order they are added to the format attribute.

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


Available formats are webp, avif, jpeg, jpg, png and gif. If the format is not specified, it will respect the default image format.

legacyFormat

Format used for fallback. Default is conditional:

If original format supports transparency (png, webp and gif), png is used for fallback
Otherwise jpeg is used for fallback
imgAttrs

Allows you to set additional HTML-attributes on the img element.

Example:

<NuxtPicture

  src="/nuxt-icon.png"

  :imgAttrs="{id:'my-id', class:'my-class', style:'display:block', 'data-my-data': 'my-value'}"

/>


<NuxtImg>

Discover how to use and configure the Nuxt Image component.

useImage()

A Vue composable that returns a helper function to generate optimized image URLs.
Providers - Nuxt Image

Get Started

Providers

Nuxt Image supports multiple providers for high performances.

Introduction to providers

Providers are integrations between Nuxt Image and third-party image transformation services. Each provider is responsible for generating correct URLs for that image transformation service.

Nuxt Image can be configured to work with any external image transformation service. Checkout sidebar for list of preconfigured providers.

If you are looking for a specific provider that is not already supported, you can create your own provider.

Nuxt Image will automatically optimize <NuxtImg> or <NuxtPicture> sources and accepts all options for specified target, except for modifiers that are specific to other providers.

Default Provider

The default optimizer and provider for Nuxt Image is ipx. Either option can be used without any configuration.

Local Images

Images should be stored in the public/ directory of your project.

For example, when using <NuxtImg src="/nuxt-icon.png" />, it should be placed in public/ folder under the path public/nuxt-icon.png.

For more information, you can learn more about the public directory.

Image stored in the assets/ directory are not proccessed with Nuxt Image because those images are managed by webpack.
Remote Images

Using default provider, you can also optimize external URLs. For this, you need to add them to domains option.

Environment Detection

You can set default provider using NUXT_IMAGE_PROVIDER environment variable.

Providers detected automatically:

Vercel
Custom Provider

It is possible to define your own provider, learn more how to create a custom provider.

Configuration

Nuxt Image is configured with sensible defaults.

Contributing

We can never thank you enough for your contributions. ❤️
Installation - Nuxt Image

Get Started

Installation

Using image module in your Nuxt project is only one command away.

You are reading the v1 documentation compatible with Nuxt 3.
Checkout v0.image.nuxtjs.org for Nuxt 2 compatible version. (Announcement).

Add @nuxt/image dependency to your project:

pnpm
yarn
npm
pnpm add @nuxt/image


Add it to modules in your nuxt.config:

nuxt.config.ts
export default defineNuxtConfig({

  modules: [

    '@nuxt/image',

  ]

})


You can now start using <NuxtImg> and <NuxtPicture> components in your application ✨

Configuration

Add an image section in your nuxt.config:

nuxt.config.ts
image: {

  // Options

}

Checkout the image configuration for all available options and features to customize.
Edge Channel

After each commit is merged into the main branch of @nuxt/image and passing all tests, we trigger an automated npm release using Github Actions publishing a @nuxt/image-edge package.

You can opt in to use this release channel and avoid waiting for the next release and helping the module by beta testing changes.

The build and publishing method and quality of edge releases are the same as stable ones. The only difference is that you should often check the GitHub repository for updates. There is a slight chance of regressions not being caught during the review process and by the automated tests. Therefore, we internally use this channel to double-check everything before each release.

Opting into the edge channel

Update @nuxt/image dependency inside package.json:

package.json
{

  "devDependencies": {

-   "@nuxt/image": "^1.0.0"

+   "@nuxt/image": "npm:@nuxt/image-edge@latest"

  }

}


Remove lockfile (package-lock.json, yarn.lock, or pnpm-lock.yaml) and reinstall dependencies.

Opting out from the edge channel

Update @nuxt/image dependency inside package.json:

package.json
{

  "devDependencies": {

-   "@nuxt/image": "npm:@nuxt/image-edge@latest"

+   "@nuxt/image": "^1.0.0"

  }

}


Remove lockfile (package-lock.json, yarn.lock, or pnpm-lock.yaml) and reinstall dependencies.

Troubleshooting

If an error occurs during installation:

Ensure using LTS version of NodeJS (NodeJS Download page)
Try to upgrade to latest versions:
pnpm
yarn
npm
pnpm up @nuxt/image

Try recreating lock-file:
npx nuxt@latest upgrade --force

If there is still an error related to sharp and node-gyp, it is is probably becase your OS architecture or NodeJS version is not included in pre-built binaries and needs to built from source (for example, this sometimes occurs on Apple M1). Checkout node-gyp for install requirements.
If none of the above worked, please open an issue and include error trace, OS, Node version and the package manager used for installing.
 

Configuration

Nuxt Image is configured with sensible defaults.