Upgrading @nuxt/image 0.7 to 1
Breaking0.7.2 → 1.11.2Breaking3Security2Deprecated1New25Changed8Fixed36Other117
Fetching 19 releases from GitHub…16 / 19
SecurityFixes an integer overflow in the /_ipx route by requiring ipx ^2.1.2, which rejects oversized multi-page images with a 400 before decoding.GHSA-qf89-6xm4-66wm ↗
BreakingUpgrade verdict
3 breaking changes and 2 security fixes.
In plain terms
- The layer0 and edgio image providers are no longer available.
- The ipx provider now forwards every option you give it, which can change the generated image URLs compared to before.
- The image processing backend is upgraded to a new major version, which may change how images are handled.
- A crafted image could crash or corrupt the server's memory through the image resizing route. The fix upgrades the underlying image library so bad images are refused before they are processed.
Must act Top 5 of 6 that need code or config changes
Node.js requirement changed in 1.10.0: >=14.20.0 → >=18.20.6.
Adds @nuxt/kit ^3.18.0, h3 ^1.15.3, knitwork ^1.2.0, ohash ^2.0.11, pathe ^2.0.3, std-env ^3.9.0.
Drops fs-extra, hasha, is-https, lru-cache, node-fetch-native, p-limit, rc9, requrl, semver, upath.
Installs 156 packages in all (was 102).
What you must change
Breaking3
Removes the layer0 and edgio providers.
layer0edgioChanges ipx provider to pass all options, altering how options are forwarded.
ipxMigrates to ipx v2, a breaking change for the image provider.
ipxSecurity2
Fixes an integer overflow in the /_ipx route by requiring ipx ^2.1.2, which rejects oversized multi-page images with a 400 before decoding.
/_ipxipxRequires patched ipx for the /_ipx route (GHSA-p5vf-pjf5-ggj3).
/_ipxipxDeprecations to plan for
Deprecated1
Adds a deprecation notice for Netlify Large Media in the docs.
API changes
Generated by DepDelta from published .d.ts files. Not mixed with prose notes.
- removed:
interface Configuration - removed:
interface Context - removed:
interface NuxtAppOptions - removed:
property Configuration.image?: Partial<ModuleOptions> - removed:
property Context.$img: $Img - removed:
property NuxtAppOptions.$img: $Img
- added:
interface NitroRuntimeConfig - added:
property NitroRuntimeConfig.ipx?: IPXRuntimeConfig
- removed:
interface Vue - removed:
property Vue.$img: $Img
- removed:
interface Store<S> - removed:
property Store.$img: $Img
- removed:
declare module '@nuxt/types' - removed:
declare module 'vue/types/vue' - removed:
declare module 'vuex/types/index' - removed:
property ImageCTX.nuxtContext: { ssrContext: any; cache?: any; isDev: boolean; isStatic: boolean; nuxtState?: any; base?: string } - removed:
property ModuleOptions.internalUrl: string - removed:
property ModuleOptions.sharp: any - removed:
property ModuleOptions.staticFilename: string - removed:
property ResolvedImage.isStatic?: boolean - changed:
const default: Module<ModuleOptions> → const default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false> - changed:
property ImageProvider.supportsAlias?: Boolean → property ImageProvider.supportsAlias?: boolean - changed:
property ImageProvider.validateDomains?: Boolean → property ImageProvider.validateDomains?: boolean - changed:
property ImageSizes.sizes: string → property ImageSizes.sizes: string | undefined - changed:
property ImageSizes.src: string → property ImageSizes.src?: string - changed:
property ModuleOptions.providers: { [name: string]: InputProvider | any } & ImageProviders → property ModuleOptions.providers: { [name: string]: InputProvider | any } - changed:
type ProviderSetup = (providerOptions: ImageModuleProvider, moduleOptions: ModuleOptions, nuxt: any) => void | Promise<void> → type ProviderSetup = (providerOptions: ImageModuleProvider, moduleOptions: ModuleOptions, nuxt: Nuxt) => void | Promise<void> - added:
declare module 'nitropack' - added:
index UploadcareOptions[key: string]: any - added:
interface IPXModifiers extends ImageModifiers - added:
interface IPXOptions extends Omit<IPXRuntimeConfig, 'alias'> - added:
interface ImageSizesVariant - added:
interface UploadcareModifiers extends ImageModifiers - added:
interface UploadcareOptions - added:
property CloudinaryModifiers.aspectRatio: string - added:
property CreateImageOptions.densities: number[] - added:
property CreateImageOptions.event?: H3Event - added:
property CreateImageOptions.format: string[] - added:
property CreateImageOptions.nuxt: { baseURL: string } - added:
property CreateImageOptions.quality?: number - added:
property CreateImageOptions.runtimeConfig: RuntimeConfig - added:
property IPXModifiers.animated: true | 'true' - added:
property IPXModifiers.background: string - added:
property IPXModifiers.blur: number | string - added:
property IPXModifiers.enlarge: true | 'true' - added:
property IPXModifiers.extend: string - added:
property IPXModifiers.extract: string - added:
property IPXModifiers.fit: 'contain' | 'cover' | 'fill' | 'inside' | 'outside' | string - added:
property IPXModifiers.flatten: true | 'true' - added:
property IPXModifiers.flip: true | 'true' - added:
property IPXModifiers.flop: true | 'true' - added:
property IPXModifiers.format: 'jpeg' | 'jpg' | 'png' | 'webp' | 'avif' | 'gif' | 'heif' | 'tiff' | 'auto' | string - added:
property IPXModifiers.gamma: string - added:
property IPXModifiers.grayscale: true | 'true' - added:
property IPXModifiers.kernel: 'nearest' | 'cubic' | 'mitchell' | 'lanczos2' | 'lanczos3' | string - added:
property IPXModifiers.median: number | string - added:
property IPXModifiers.modulate: string - added:
property IPXModifiers.negate: true | 'true' - added:
property IPXModifiers.normalize: true | 'true' - added:
property IPXModifiers.position: string - added:
property IPXModifiers.quality: number | string - added:
property IPXModifiers.resize: string - added:
property IPXModifiers.rotate: number | string - added:
property IPXModifiers.sharpen: number | string - added:
property IPXModifiers.threshold: number | string - added:
property IPXModifiers.tint: number | string - added:
property IPXModifiers.trim: number | string - added:
property IPXOptions.modifiers: Partial<IPXModifiers> - added:
property ImageOptions.densities?: string - added:
property ImageProviders.edgio?: any - added:
property ImageProviders.sirv?: any - added:
property ImageProviders.uploadcare?: Partial<UploadcareOptions> - added:
property ImageProviders.wagtail?: any - added:
property ImageSizesVariant._cHeight?: number | undefined - added:
property ImageSizesVariant._cWidth: number - added:
property ImageSizesVariant.screenMaxWidth: number - added:
property ImageSizesVariant.size?: string - added:
property ModuleOptions.densities: number[] - added:
property ModuleOptions.format: CreateImageOptions['format'] - added:
property ModuleOptions.inject: boolean - added:
property ModuleOptions.quality?: CreateImageOptions['quality'] - added:
property UploadcareModifiers.border_radius: string | string[] - added:
property UploadcareModifiers.crop: string | string[] - added:
property UploadcareModifiers.format: 'jpeg' | 'png' | 'webp' | 'auto' - added:
property UploadcareModifiers.preview: `${number}x${number}` - added:
property UploadcareModifiers.progressive: 'yes' | 'no' - added:
property UploadcareModifiers.quality: 'smart' | 'smart_retina' | 'normal' | 'better' | 'best' | 'lighter' | 'lightest' - added:
property UploadcareModifiers.resize: `${number}x${number}` | `${number}x` | `x${number}` - added:
property UploadcareModifiers.scale_crop: string | string[] - added:
property UploadcareModifiers.setfill: string - added:
property UploadcareModifiers.smart_resize: `${number}x${number}` - added:
property UploadcareModifiers.strip_meta: 'all' | 'none' | 'sensitive' - added:
property UploadcareModifiers.zoom_objects: string - added:
property UploadcareOptions.cdnURL: string - added:
property UploadcareOptions.modifiers: Partial<UploadcareModifiers>
- added:
const baseImageProps: { src: { type: StringConstructor; required: boolean }; format: { type: StringConstructor; required: boolean }; quality: { type: (NumberConstructor | StringCons… - added:
const imgProps: { placeholder: { type: (ArrayConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[]; required: boolean }; placeholderClass: { type: String… - added:
const pictureProps: { legacyFormat: { type: StringConstructor; default: null }; imgAttrs: { type: ObjectConstructor; default: null }; src: { type: StringConstructor; required: boo… - added:
const useBaseImage: (props: ExtractPropTypes<typeof baseImageProps>) => { options: import('vue').ComputedRef<{ provider: string | undefined; preset: string | undefined }>; attrs:… - added:
index BaseImageModifiers[key: string]: any - added:
interface BaseImageAttrs - added:
interface BaseImageModifiers - added:
property BaseImageAttrs.alt?: string - added:
property BaseImageAttrs.crossorigin?: '' | 'anonymous' | 'use-credentials' - added:
property BaseImageAttrs.decoding?: 'async' | 'auto' | 'sync' - added:
property BaseImageAttrs.height?: number - added:
property BaseImageAttrs.ismap?: boolean - added:
property BaseImageAttrs.loading?: 'lazy' | 'eager' - added:
property BaseImageAttrs.longdesc?: string - added:
property BaseImageAttrs.nonce?: string - added:
property BaseImageAttrs.referrerpolicy?: ImgHTMLAttributes['referrerpolicy'] - added:
property BaseImageAttrs.usemap?: string - added:
property BaseImageAttrs.width?: number - added:
property BaseImageModifiers.background?: string - added:
property BaseImageModifiers.fit?: string - added:
property BaseImageModifiers.format?: string - added:
property BaseImageModifiers.height?: number - added:
property BaseImageModifiers.quality?: string | number - added:
property BaseImageModifiers.width?: number
- removed:
const imageMixin: { nImgAttrs: { width?: number; height?: number; alt?: string; referrerpolicy?: string; usemap?: string; longdesc?: string; ismap?: boolean; crossorigin?: '' |…
- removed:
const _default: import('vue/types/vue').ExtendedVue<import('vue').default, unknown, unknown, { nAttrs: NAttrs; nMainSrc: string; nSizes: ImageSizes; nSrc: string; nPlaceholder… - removed:
default _default
- removed:
const _default: import('vue/types/vue').ExtendedVue<import('vue').default, unknown, unknown, { isTransparent: boolean; originalFormat: string; nFormat: string; nLegacyFormat:… - removed:
default _default
- added:
const useImage: (event?: H3Event) => $Img
- changed:
function createImage(globalOptions: CreateImageOptions, nuxtContext: any): $Img → function createImage(globalOptions: CreateImageOptions): $Img
- removed:
export * from './utils' - added:
export * from './utils/index'
- changed:
const _default: (req: import('http').IncomingMessage, res: import('http').ServerResponse) => Promise<void> → const _default: import('h3').EventHandler<import('h3').EventHandlerRequest, any>
- removed:
default function _default(nuxtContext: any, inject: any): void - added:
const _default: Plugin<{ img: $Img }> - added:
default _default
- added:
const getImage: ProviderGetImage
- added:
const getImage: ProviderGetImage - added:
const operationsGenerator: (modifiers?: { [key: string]: string }) => string - added:
const validateDomains = true
- added:
const getImage: ProviderGetImage - added:
const operationsGenerator: (modifiers?: { [key: string]: string }) => string
- added:
const getImage: ProviderGetImage - added:
const operationsGenerator: (modifiers?: { [key: string]: string }) => string
- changed:
const operationsGenerator: any → const operationsGenerator: (modifiers?: { [key: string]: string }) => string
- added:
const getImage: ProviderGetImage - added:
const operationsGenerator: (modifiers?: { [key: string]: string }) => string
- added:
const getImage: ProviderGetImage
- added:
const getImage: ProviderGetImage
- changed:
const operationsGenerator: any → const operationsGenerator: (modifiers?: { [key: string]: string }) => string
- added:
const getImage: ProviderGetImage
- changed:
const operationsGenerator: any → const operationsGenerator: (modifiers?: { [key: string]: string }) => string
- changed:
const operationsGenerator: any → const operationsGenerator: (modifiers?: { [key: string]: string }) => string
- added:
const operationsGenerator: (modifiers?: { [key: string]: string }) => string
- added:
const getImage: ProviderGetImage - added:
export { supportsAlias } from './ipx' - added:
export { validateDomains } from './ipx'
- removed:
const getImage: ProviderGetImage - added:
export * from './edgio'
- removed:
const getImage: ProviderGetImage - removed:
const operationsGenerator: any
- added:
const getImage: ProviderGetImage - added:
const operationsGenerator: (modifiers?: { [key: string]: string }) => string
- added:
const getImage: ProviderGetImage - added:
const operationsGenerator: (modifiers?: { [key: string]: string }) => string
- added:
const getImage: ProviderGetImage
- added:
function formatter(key: string, value: string): string
- added:
const getImage: PreprProviderGetImage
- added:
export * from './getImage'
- added:
const keyMap: { readonly crop: 'c'; readonly format: 'format'; readonly height: 'h'; readonly quality: 'q'; readonly width: 'w' } - added:
type KeyMapKey = keyof typeof keyMap - added:
type KeyMapValue = typeof keyMap[KeyMapKey]
- added:
const valueMap: { readonly format: { readonly jpeg: 'jpg' }; readonly fit: { readonly cover: 'crop' } } - added:
type ValuesMapKey = keyof typeof valueMap - added:
type ValuesMapValue = typeof valueMap[ValuesMapKey]
- added:
const prismicCDN = 'https://images.prismic.io/'
- added:
const getImage: ProviderGetImage - added:
const operationsGenerator: (modifiers?: { [key: string]: string }) => string
- removed:
const getImage: typeof _getImage - removed:
const supportsAlias = true
- added:
const getImage: ProviderGetImage
- added:
const unsplashCDN = 'https://images.unsplash.com/'
- added:
const getImage: ProviderGetImage
- added:
const getImage: ProviderGetImage
- added:
const getImage: ProviderGetImage - added:
interface WeservOptions extends ImageOptions - added:
property WeservOptions.baseURL: string - added:
property WeservOptions.weservURL?: string
- added:
const useImage: (event?: H3Event) => Img
- changed:
function generateAlt(src?: string): string → function generateAlt(src?: string): string | undefined - changed:
function parseSize(input?: string | number | undefined): number → function parseSize(input?: string | number | undefined): number | undefined - added:
function checkDensities(densities: number[]): void - added:
function parseDensities(input?: string | undefined): number[] - added:
function parseSizes(input: Record<string, string | number> | string): Record<string, string>
- changed:
function imageMeta(ctx: ImageCTX, url: string): Promise<ImageInfo> → function imageMeta(_ctx: ImageCTX, url: string): Promise<ImageInfo>
- added:
function markFeatureUsage(featureName: string): void
- added:
function prerenderStaticImages(src?: string, srcset?: string, event?: H3Event): void
- removed:
function useStaticImageMap(nuxtContext?: Context): {}
- added:
export { default } from './module' - added:
type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>