Module Options

To configure the image module and customize its behavior, you can use the image property in your nuxt.config:

export default {
  image: {
    // Options
  }
}

screens

List of predefined screen sizes.

These sizes will be used to generate resized and optimized versions of an image (for example, with the sizes modifier).

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

domains

To enable image optimization on an external website, specify which domains are allowed to be optimized. This option will be used to detect whether a remote image should be optimized or not. This is needed to ensure that external urls can't be abused.

export default {
  image: {
    domains: ['https://nuxtjs.org']
  }
}

presets

Presets are collections of pre-defined configurations for your projects. Presets will help you to unify images all over your project.

export default {
  image: {
    presets: {
      avatar: {
        modifiers: {
          format: 'jpg',
          width: 50,
          height: 50
        }
      }
    }
  }
}

<template>
  <nuxt-img preset="avatar" src="/nuxt-icon.png" />
</template>

providers

In order to create and use a custom provider, you need to use the providers option and define your custom providers.

export default {
  image: {
    providers: {
      random: {
        provider: '~/providers/random',
        options: {}
      }
    }
  }
}

<template>
  <nuxt-img provider="random" src="main.png" width="300" height="169" />
</template>

provider

Default: static

We can specify default provider to be used when not specified in component or when calling $img.

export default {
  image: {
    provider: 'twicpics',
    twicpics: {
      baseURL: 'https://nuxt-demo.twic.pics'
    }
  }
}

staticFilename

You can use this option to change filename and location for the static image generation.

Parameters

• [name]: Only filename, without extension or path
• [hash]: The hash of url
• [ext]: Extension with leading dot .png
• [publicPath]: Default is build.publicPath (/_nuxt)

export default {
  image: {
      // Generate images to `/_nuxt/image/file.png`
      staticFilename: '[publicPath]/images/[name]-[hash][ext]'
  }
}

dir

Default: static

This option allows you to specify the location of the source images when using the static or ipx provider.

For example you might want the source images in assets/images directory rather than the default static directory so the source images don't get copied into dist and deployed:

export default {
  image: {
    dir: 'assets/images'
  }
}

Notes:

• For static provider, if images weren't crawled during generation (unreachable modals, pages or dynamic runtime size), changing dir from static causes 404 errors.
• For ipx provider, make sure to deploy customized dir as well.
• For some providers (like vercel), using a directory other than static/ for assets is not supported since resizing happens at runtime (instead of build/generate time) and source fetched from the static/ directory (deployment URL)