AWS Amplify

Integration between AWS Amplify Hosting and the image module.

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

Domains

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

Example:

export default defineNuxtConfig({
  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:

export default defineNuxtConfig({
  image: {
    screens: {
      icon: 40,
      avatar: 24
    }
  }
})

Modifiers

All the default modifiers from AWS's documentation are available.

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

Options

formats

• Type: String (optional)

Specify the image format allow list for optimization. By default, the provider set the following formats: ['image/jpeg', 'image/png', 'image/webp', 'image/avif'].

export default defineNuxtConfig({
  image: {
    awsAmplify: {
      formats: ['image/jpeg', 'image/png', 'image/webp']
    }
  }
})