Upgrading @nuxt/image 1 to 2
Breaking1.11.2 → 2.2.1Breaking18Security2New46Changed18Fixed47Other104
SecurityFixes an integer overflow in the /_ipx route when decoding multi-page images, which could corrupt server memory from one unauthenticated request.GHSA-qf89-6xm4-66wm ↗
BreakingUpgrade verdict
11 breaking changes and 2 security fixes.
In plain terms
- If you used the sharpen setting with the Directus image provider, it no longer exists.
- Custom providers written the old way stop working and must be rewritten in the new format.
- The default list of image widths changed, so the smallest and largest default sizes are gone unless you add them back.
- The edgio and layer0 image providers are removed, so configurations using them will stop working.
Must act Top 5 of 13 that need code or config changes
@nuxt/image publishes an official migration guide for version 2. It covers more than the release notes do.
Migration guide ↗Node.js requirement changed in 2.2.0: >=18.20.6 → ^20.19.0 || >=22.12.0.
Adds @noble/hashes ^2.4.0.
Drops consola.
Installs 67 packages in all (was 156).
What you must change
Breaking11
Removes the deprecated sharpen option from the Directus provider.
directussharpenAll providers must use a default export with the defineProvider wrapper, including a name and getImage method.
defineProvidergetImagenameDefault screen sizes now match Tailwind CSS, removing xs (320px) and xxl (2560px).
xsxxlRemoves the edgio and layer0 providers.
edgiolayer0Removes several unused runtime utilities that were previously importable internally.
Uses URLSearchParams as the default formatter.
URLSearchParamsRemoves unused runtime utilities and simplifies code.
Restricts /_ipx input to JPEG, PNG, WebP, GIF, SVG, AVIF and HEIC, returning 403 for other formats before decoding.
/_ipximage.ipx.allowedInputFormatsimage.ipx.restrictDecodersCustom providers using joinWith for parameter formatting must switch to the formatter function with createOperationsGenerator.
joinWithformattercreateOperationsGeneratorIntroduces typed providers and modifiers.
Adds typed providers and modifiers.
Security2
Fixes an integer overflow in the /_ipx route when decoding multi-page images, which could corrupt server memory from one unauthenticated request.
/_ipxSVG sanitization now always runs, fixing a potential XSS vector when svgo is false.
svgoforeignObjectiframeAPI changes
Generated by DepDelta from published .d.ts files. Not mixed with prose notes.
- removed:
interface NitroRuntimeConfig - removed:
property NitroRuntimeConfig.ipx?: IPXRuntimeConfig
- removed:
declare module 'nitropack' - removed:
index CloudinaryOptions[key: string]: any - removed:
index ImageModifiers[key: string]: any - removed:
index ImageOptions[key: string]: any - removed:
index ModuleOptions[key: string]: any - removed:
index UploadcareOptions[key: string]: any - removed:
interface CloudinaryModifiers extends ImageModifiers - removed:
interface CloudinaryOptions - removed:
interface IPXModifiers extends ImageModifiers - removed:
interface IPXOptions extends Omit<IPXRuntimeConfig, 'alias'> - removed:
interface ImageSize - removed:
interface OperationGeneratorConfig - removed:
interface RuntimePlaceholder extends ImageInfo - removed:
interface UploadcareModifiers extends ImageModifiers - removed:
interface UploadcareOptions - removed:
property CloudinaryModifiers.aspectRatio: string - removed:
property CloudinaryModifiers.background: string - removed:
property CloudinaryModifiers.color: string - removed:
property CloudinaryModifiers.colorSpace: string - removed:
property CloudinaryModifiers.customFunc: string - removed:
property CloudinaryModifiers.density: number - removed:
property CloudinaryModifiers.dpr: string - removed:
property CloudinaryModifiers.effect: string - removed:
property CloudinaryModifiers.flags: string - removed:
property CloudinaryModifiers.format: string - removed:
property CloudinaryModifiers.gravity: string - removed:
property CloudinaryModifiers.opacity: number - removed:
property CloudinaryModifiers.overlay: string - removed:
property CloudinaryModifiers.quality: string - removed:
property CloudinaryModifiers.rotate: 'auto_right' | 'auto_left' | 'ignore' | 'vflip' | 'hflip' | number - removed:
property CloudinaryModifiers.roundCorner: string - removed:
property CloudinaryModifiers.transformation: string - removed:
property CloudinaryModifiers.underlay: string - removed:
property CloudinaryModifiers.zoom: number - removed:
property CloudinaryOptions.baseURL: string - removed:
property CloudinaryOptions.modifiers: Partial<CloudinaryModifiers> - removed:
property IPXModifiers.animated: true | 'true' - removed:
property IPXModifiers.background: string - removed:
property IPXModifiers.blur: number | string - removed:
property IPXModifiers.enlarge: true | 'true' - removed:
property IPXModifiers.extend: string - removed:
property IPXModifiers.extract: string - removed:
property IPXModifiers.fit: 'contain' | 'cover' | 'fill' | 'inside' | 'outside' | string - removed:
property IPXModifiers.flatten: true | 'true' - removed:
property IPXModifiers.flip: true | 'true' - removed:
property IPXModifiers.flop: true | 'true' - removed:
property IPXModifiers.format: 'jpeg' | 'jpg' | 'png' | 'webp' | 'avif' | 'gif' | 'heif' | 'tiff' | 'auto' | string - removed:
property IPXModifiers.gamma: string - removed:
property IPXModifiers.grayscale: true | 'true' - removed:
property IPXModifiers.kernel: 'nearest' | 'cubic' | 'mitchell' | 'lanczos2' | 'lanczos3' | string - removed:
property IPXModifiers.median: number | string - removed:
property IPXModifiers.modulate: string - removed:
property IPXModifiers.negate: true | 'true' - removed:
property IPXModifiers.normalize: true | 'true' - removed:
property IPXModifiers.position: string - removed:
property IPXModifiers.quality: number | string - removed:
property IPXModifiers.resize: string - removed:
property IPXModifiers.rotate: number | string - removed:
property IPXModifiers.sharpen: number | string - removed:
property IPXModifiers.threshold: number | string - removed:
property IPXModifiers.tint: number | string - removed:
property IPXModifiers.trim: number | string - removed:
property IPXOptions.modifiers: Partial<IPXModifiers> - removed:
property ImageProviders.cloudflare?: any - removed:
property ImageProviders.cloudimage?: any - removed:
property ImageProviders.cloudinary?: Partial<CloudinaryOptions> - removed:
property ImageProviders.contentful?: any - removed:
property ImageProviders.edgio?: any - removed:
property ImageProviders.fastly?: any - removed:
property ImageProviders.glide?: any - removed:
property ImageProviders.gumlet?: any - removed:
property ImageProviders.imageengine?: any - removed:
property ImageProviders.imagekit?: any - removed:
property ImageProviders.imgix?: any - removed:
property ImageProviders.ipx?: Partial<IPXOptions> - removed:
property ImageProviders.layer0?: any - removed:
property ImageProviders.prismic?: any - removed:
property ImageProviders.sirv?: any - removed:
property ImageProviders.static?: Partial<IPXOptions> - removed:
property ImageProviders.storyblok?: any - removed:
property ImageProviders.strapi?: any - removed:
property ImageProviders.twicpics?: any - removed:
property ImageProviders.uploadcare?: Partial<UploadcareOptions> - removed:
property ImageProviders.wagtail?: any - removed:
property ImageSize.breakpoint: number - removed:
property ImageSize.format: string - removed:
property ImageSize.media: string - removed:
property ImageSize.url: string - removed:
property ImageSize.width: number - removed:
property OperationGeneratorConfig.formatter?: OperationFormatter - removed:
property OperationGeneratorConfig.joinWith?: string - removed:
property OperationGeneratorConfig.keyMap?: OperationMapper - removed:
property OperationGeneratorConfig.valueMap?: { [key: string]: OperationMapper } - removed:
property RuntimePlaceholder.url: string - removed:
property UploadcareModifiers.border_radius: string | string[] - removed:
property UploadcareModifiers.crop: string | string[] - removed:
property UploadcareModifiers.format: 'jpeg' | 'png' | 'webp' | 'auto' - removed:
property UploadcareModifiers.preview: `${number}x${number}` - removed:
property UploadcareModifiers.progressive: 'yes' | 'no' - removed:
property UploadcareModifiers.quality: 'smart' | 'smart_retina' | 'normal' | 'better' | 'best' | 'lighter' | 'lightest' - removed:
property UploadcareModifiers.resize: `${number}x${number}` | `${number}x` | `x${number}` - removed:
property UploadcareModifiers.scale_crop: string | string[] - removed:
property UploadcareModifiers.setfill: string - removed:
property UploadcareModifiers.smart_resize: `${number}x${number}` - removed:
property UploadcareModifiers.strip_meta: 'all' | 'none' | 'sensitive' - removed:
property UploadcareModifiers.zoom_objects: string - removed:
property UploadcareOptions.cdnURL: string - removed:
property UploadcareOptions.modifiers: Partial<UploadcareModifiers> - removed:
type MapToStatic = (image: ResolvedImage, input: string) => string - removed:
type OperationFormatter = (key: string, value: string) => string - changed:
interface ImageOptions → interface ImageOptions<Provider extends keyof ConfiguredImageProviders = DefaultProvider> - changed:
interface ImageProvider → interface ImageProvider<T> extends ImageModifierOptions - changed:
property CreateImageOptions.event?: H3Event → property CreateImageOptions.event?: H3Event | { res: { headers: Headers } } - changed:
property CreateImageOptions.nuxt: { baseURL: string } → property CreateImageOptions.nuxt: { baseURL: string; createError: (error: { statusCode?: number; statusMessage?: string; message?: string; data?: unknown; fatal?: boolean; name?: string }) => Error } - changed:
property CreateImageOptions.provider: string → property CreateImageOptions.provider: (string & {}) | keyof ImageProviders - changed:
property CreateImageOptions.providers: { [name: string]: { defaults: any; provider: ImageProvider } } → property CreateImageOptions.providers: Record<keyof ConfiguredImageProviders, { defaults: unknown; setup: () => ImageProvider<Record<string, unknown>> }> - changed:
property ImageModifiers.height: number → property ImageModifiers.height: number | string - changed:
property ImageModifiers.width: number → property ImageModifiers.width: number | string - changed:
property ImageOptions.modifiers?: Partial<ImageModifiers> → property ImageOptions.modifiers?: Partial<Omit<ImageModifiers, 'format' | 'quality' | 'background' | 'fit'>> & ('modifiers' extends keyof ConfiguredImageProviders[Provider] ? ConfiguredImageProviders[Provider]['modifiers'] : Record<string, unknown>) - changed:
property ImageOptions.provider?: string → property ImageOptions.provider?: Provider - changed:
property ImageProvider.defaults?: any → property ImageProvider.defaults?: T - changed:
property ImageProvider.getImage: ProviderGetImage → property ImageProvider.getImage: ProviderGetImage<T> - changed:
type OperationMapper = { [key: string]: string | false } | ((key: string) => string) → type OperationMapper<From, To> = Record<string | Extract<From, string | number>, To> | ((key?: From) => To | From | undefined) - changed:
type ProviderGetImage = (src: string, options: ImageOptions, ctx: ImageCTX) => ResolvedImage → type ProviderGetImage<T = Record<string, unknown>> = (src: string, options: Omit<ImageOptions, 'modifiers'> & { modifiers: Partial<ResolvedImageModifiers> } & T, ctx: ImageCTX) => ResolvedImage - added:
interface ConfiguredImageProviders - added:
interface ProviderDefaults - added:
interface ResolvedImageModifiers extends ImageModifiers - added:
property ImageModifiers.background: string - added:
property ImageModifiers.blur: number - added:
property ImageModifiers.quality: string | number - added:
property ImageOptions.sizes?: string | Record<string, any> - added:
property ModuleOptions.dirs: string[] - added:
property ResolvedImageModifiers.height: number - added:
property ResolvedImageModifiers.width: number - added:
type OperationGeneratorConfig<Key extends string, Value, FinalKey, FinalValue> = { keyMap?: Partial<Record<Key, FinalKey>>; valueMap?: Partial<Record<Key, Partial<Record<Extract<Value, string>, FinalValue>> | ((key: Value) => Value | FinalV…
- added:
const _default: typeof __VLS_export - added:
default _default - added:
interface DefaultSlotProps - added:
interface ImageProps<Provider extends keyof ConfiguredImageProviders> extends BaseImageProps<Provider> - added:
property DefaultSlotProps.imgAttrs: ImgHTMLAttributes - added:
property DefaultSlotProps.isLoaded: boolean - added:
property DefaultSlotProps.src?: string - added:
property ImageProps.custom?: boolean - added:
property ImageProps.placeholder?: boolean | string | number | [w: number, h: number, q?: number, b?: number] - added:
property ImageProps.placeholderClass?: string
- added:
const _default: typeof __VLS_export - added:
default _default - added:
interface PictureProps<Provider extends keyof ConfiguredImageProviders> extends BaseImageProps<Provider> - added:
property PictureProps.imgAttrs?: ImgHTMLAttributes & DataAttributes - added:
property PictureProps.legacyFormat?: string
- removed:
const baseImageProps: { src: { type: StringConstructor; required: boolean }; format: { type: StringConstructor; required: boolean }; quality: { type: (NumberConstructor | StringCons… - removed:
const imgProps: { placeholder: { type: (ArrayConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[]; required: boolean }; placeholderClass: { type: String… - removed:
const pictureProps: { legacyFormat: { type: StringConstructor; default: null }; imgAttrs: { type: ObjectConstructor; default: null }; src: { type: StringConstructor; required: boo… - removed:
const useBaseImage: (props: ExtractPropTypes<typeof baseImageProps>) => { options: import('vue').ComputedRef<{ provider: string | undefined; preset: string | undefined }>; attrs:… - removed:
index BaseImageModifiers[key: string]: any - removed:
interface BaseImageAttrs - removed:
interface BaseImageModifiers - removed:
property BaseImageAttrs.alt?: string - removed:
property BaseImageAttrs.crossorigin?: '' | 'anonymous' | 'use-credentials' - removed:
property BaseImageAttrs.decoding?: 'async' | 'auto' | 'sync' - removed:
property BaseImageAttrs.height?: number - removed:
property BaseImageAttrs.ismap?: boolean - removed:
property BaseImageAttrs.loading?: 'lazy' | 'eager' - removed:
property BaseImageAttrs.longdesc?: string - removed:
property BaseImageAttrs.nonce?: string - removed:
property BaseImageAttrs.referrerpolicy?: ImgHTMLAttributes['referrerpolicy'] - removed:
property BaseImageAttrs.usemap?: string - removed:
property BaseImageAttrs.width?: number - removed:
property BaseImageModifiers.background?: string - removed:
property BaseImageModifiers.fit?: string - removed:
property BaseImageModifiers.format?: string - removed:
property BaseImageModifiers.height?: number - removed:
property BaseImageModifiers.quality?: string | number - removed:
property BaseImageModifiers.width?: number
- removed:
export * from './image' - removed:
export * from './utils/index' - added:
export { ImageProps } from './components/NuxtImg.vue' - added:
export { Mapper } from './utils/index' - added:
export { PictureProps } from './components/NuxtPicture.vue' - added:
export { createImage } from './image' - added:
export { createMapper } from './utils/index' - added:
export { createOperationsGenerator } from './utils/index' - added:
export { defineProvider } from './utils/provider'
- removed:
const _default: import('h3').EventHandler<import('h3').EventHandlerRequest, any> - removed:
default _default
- removed:
const _default: Plugin<{ img: $Img }> - removed:
default _default
- added:
const _default: Plugin<{ img: $Img }> - added:
default _default
- removed:
const getImage: ProviderGetImage - added:
const _default: () => import('../../module.js').ImageProvider<AliyunOptions> - added:
default _default
- removed:
const getImage: ProviderGetImage - removed:
const operationsGenerator: (modifiers?: { [key: string]: string }) => string - removed:
const validateDomains = true - added:
const _default: () => import('../../module.js').ImageProvider<AmplifyOptions> - added:
default _default
- added:
const _default: () => import('../../module.js').ImageProvider<unknown> - added:
default _default
- removed:
const getImage: ProviderGetImage - removed:
const operationsGenerator: (modifiers?: { [key: string]: string }) => string - added:
const _default: () => import('../../module.js').ImageProvider<BunnyOptions> - added:
default _default
- removed:
const getImage: ProviderGetImage - removed:
const operationsGenerator: (modifiers?: { [key: string]: string }) => string - added:
const _default: () => import('../../module.js').ImageProvider<unknown> - added:
default _default
- removed:
const getImage: ProviderGetImage - added:
const _default: () => import('../../module.js').ImageProvider<CloudflareOptions> - added:
default _default
- added:
const _default: () => import('../../module.js').ImageProvider<CloudflareImagesOptions> - added:
default _default - added:
interface CloudflareImagesModifiers extends ImageModifiers - added:
interface CloudflareImagesOptions - added:
property CloudflareImagesModifiers.anim: 'true' | 'false' - added:
property CloudflareImagesModifiers.brightness: number - added:
property CloudflareImagesModifiers.compression: 'fast' - added:
property CloudflareImagesModifiers.contrast: number - added:
property CloudflareImagesModifiers.dpr: number - added:
property CloudflareImagesModifiers.flip: 'h' | 'v' | 'hv' - added:
property CloudflareImagesModifiers.gamma: number - added:
property CloudflareImagesModifiers.gravity: 'auto' | 'face' | 'left' | 'right' | 'top' | 'bottom' | string - added:
property CloudflareImagesModifiers.metadata: 'copyright' | 'keep' | 'none' - added:
property CloudflareImagesModifiers.onerror: 'redirect' - added:
property CloudflareImagesModifiers.rotate: 90 | 180 | 270 - added:
property CloudflareImagesModifiers.saturation: number - added:
property CloudflareImagesModifiers.segment: 'foreground' - added:
property CloudflareImagesModifiers.sharpen: number - added:
property CloudflareImagesModifiers.variant: string - added:
property CloudflareImagesModifiers.zoom: number - added:
property CloudflareImagesOptions.accountHash: string - added:
property CloudflareImagesOptions.baseURL?: string - added:
property CloudflareImagesOptions.modifiers?: Partial<CloudflareImagesModifiers>
- removed:
const getImage: ProviderGetImage - added:
const _default: () => import('../../module.js').ImageProvider<CloudimageOptions> - added:
default _default
- removed:
const getImage: ProviderGetImage - added:
const _default: () => import('../../module.js').ImageProvider<CloudinaryOptions> - added:
default _default - added:
index CloudinaryOptions[key: string]: any - added:
interface CloudinaryModifiers extends ImageModifiers - added:
interface CloudinaryOptions - added:
property CloudinaryModifiers.aspectRatio: string - added:
property CloudinaryModifiers.background: string - added:
property CloudinaryModifiers.blur: number - added:
property CloudinaryModifiers.color: string - added:
property CloudinaryModifiers.colorSpace: string - added:
property CloudinaryModifiers.customFunc: string - added:
property CloudinaryModifiers.density: number - added:
property CloudinaryModifiers.dpr: string - added:
property CloudinaryModifiers.effect: string - added:
property CloudinaryModifiers.flags: string - added:
property CloudinaryModifiers.format: string - added:
property CloudinaryModifiers.gravity: string - added:
property CloudinaryModifiers.opacity: number - added:
property CloudinaryModifiers.overlay: string - added:
property CloudinaryModifiers.quality: string - added:
property CloudinaryModifiers.rotate: 'auto_right' | 'auto_left' | 'ignore' | 'vflip' | 'hflip' | number - added:
property CloudinaryModifiers.roundCorner: string - added:
property CloudinaryModifiers.transformation: string - added:
property CloudinaryModifiers.underlay: string - added:
property CloudinaryModifiers.zoom: number - added:
property CloudinaryOptions.baseURL?: string - added:
property CloudinaryOptions.modifiers?: Partial<CloudinaryModifiers>
- removed:
const getImage: ProviderGetImage - removed:
const operationsGenerator: (modifiers?: { [key: string]: string }) => string - added:
const _default: () => import('../../module.js').ImageProvider<ContentfulOptions> - added:
default _default
- removed:
const getImage: ProviderGetImage - removed:
const operationsGenerator: (modifiers?: { [key: string]: string }) => string - added:
const _default: () => import('../../module.js').ImageProvider<DirectusOptions> - added:
default _default
- added:
const _default: () => import('../../module.js').ImageProvider<EdgeOnePagesOptions> - added:
default _default - added:
interface EdgeOnePagesOptions - added:
property EdgeOnePagesOptions.baseURL: string - added:
property EdgeOnePagesOptions.modifiers?: Partial<EdgeOnePagesModifiers>
- removed:
const getImage: ProviderGetImage
- removed:
const getImage: ProviderGetImage - added:
const _default: () => import('../../module.js').ImageProvider<FastlyOptions> - added:
default _default
- removed:
const getImage: ProviderGetImage - added:
const _default: () => import('../../module.js').ImageProvider<FilerobotOptions> - added:
default _default
- added:
const _default: () => import('../../module.js').ImageProvider<FlyimgOptions> - added:
default _default
- added:
const _default: () => import('../../module.js').ImageProvider<GitHubOptions> - added:
default _default
- removed:
const getImage: ProviderGetImage - added:
const _default: () => import('../../module.js').ImageProvider<GlideOptions> - added:
default _default
- removed:
const getImage: ProviderGetImage - removed:
const operationsGenerator: (modifiers?: { [key: string]: string }) => string - added:
const _default: () => import('../../module.js').ImageProvider<GumletOptions> - added:
default _default
- removed:
const getImage: ProviderGetImage - added:
const _default: () => import('../../module.js').ImageProvider<HygraphOptions> - added:
default _default
- removed:
const getImage: ProviderGetImage - removed:
const operationsGenerator: (modifiers?: { [key: string]: string }) => string - added:
const _default: () => import('../../module.js').ImageProvider<ImageEngineOptions> - added:
default _default
- removed:
const getImage: ProviderGetImage - added:
const _default: () => import('../../module.js').ImageProvider<ImagekitOptions> - added:
default _default
- removed:
const getImage: ProviderGetImage - changed:
const operationsGenerator: (modifiers?: { [key: string]: string }) => string → const operationsGenerator: (modifiers: Partial<Record<string, string | number | boolean>>) => string - added:
const _default: () => import('../../module.js').ImageProvider<ImgixOptions> - added:
default _default
- added:
const _default: () => import('../../module.js').ImageProvider<ImgproxyOptions> - added:
default _default - added:
interface ImgproxyCrop - added:
interface ImgproxyModifiers extends Omit<ImageModifiers, 'fit' | 'format' | 'background' | 'resize' | 'width' | 'height'> - added:
property ImgproxyCrop.gravity?: ImgproxyGravityType - added:
property ImgproxyCrop.height: number - added:
property ImgproxyCrop.width: number - added:
property ImgproxyModifiers.autoRotate: boolean - added:
property ImgproxyModifiers.background: string - added:
property ImgproxyModifiers.cachebuster: string - added:
property ImgproxyModifiers.crop: ImgproxyCrop - added:
property ImgproxyModifiers.dpr: number - added:
property ImgproxyModifiers.enforceThumbnail: boolean - added:
property ImgproxyModifiers.enlarge: boolean - added:
property ImgproxyModifiers.expires: number - added:
property ImgproxyModifiers.extend: boolean - added:
property ImgproxyModifiers.extendAspectRatio: string - added:
property ImgproxyModifiers.filename: string - added:
property ImgproxyModifiers.fit: 'cover' | 'contain' | 'fill' | 'inside' | 'outside' - added:
property ImgproxyModifiers.format: ImgproxyFormat - added:
property ImgproxyModifiers.gravity: ImgproxyGravityType | string - added:
property ImgproxyModifiers.height: number - added:
property ImgproxyModifiers.keepCopyright: boolean - added:
property ImgproxyModifiers.maxAnimationFrameResolution: string - added:
property ImgproxyModifiers.maxAnimationFrames: number - added:
property ImgproxyModifiers.maxBytes: number - added:
property ImgproxyModifiers.maxResultDimension: string - added:
property ImgproxyModifiers.maxSrcFileSize: number - added:
property ImgproxyModifiers.maxSrcResolution: number - added:
property ImgproxyModifiers.minHeight: number - added:
property ImgproxyModifiers.minWidth: number - added:
property ImgproxyModifiers.pixelate: number - added:
property ImgproxyModifiers.preset: string - added:
property ImgproxyModifiers.raw: boolean - added:
property ImgproxyModifiers.resize: string - added:
property ImgproxyModifiers.resizingType: ImgproxyResizingType - added:
property ImgproxyModifiers.returnAttachment: boolean - added:
property ImgproxyModifiers.rotate: number - added:
property ImgproxyModifiers.sharpen: number - added:
property ImgproxyModifiers.size: string - added:
property ImgproxyModifiers.stripColorProfile: boolean - added:
property ImgproxyModifiers.stripMetadata: boolean - added:
property ImgproxyModifiers.width: number - added:
property ImgproxyModifiers.zoom: string | number - added:
type ImgproxyBooleanPrimitive = string | number | boolean - added:
type ImgproxyFormat = 'webp' | 'png' | 'jpg' | 'jpeg' | 'jxl' | 'avif' | 'gif' | 'ico' | 'svg' | 'heic' | 'bmp' | 'tiff' | 'pdf' | 'psd' | 'mp4' - added:
type ImgproxyGravityType = 'ce' | 'no' | 'so' | 'ea' | 'we' | 'noea' | 'nowe' | 'soea' | 'sowe' - added:
type ImgproxyResizingType = 'fit' | 'fill' | 'fill-down' | 'force' | 'auto'
- removed:
const getImage: ProviderGetImage - removed:
const supportsAlias = true - removed:
const validateDomains = true - changed:
const operationsGenerator: (modifiers?: { [key: string]: string }) => string → const operationsGenerator: (modifiers: Partial<Record<string, string | number | boolean>>) => string - added:
const _default: () => import('../../module.js').ImageProvider<Partial<IPXOptions>> - added:
default _default - added:
export { IPXModifiers } - added:
interface IPXOptions extends Omit<IPXRuntimeConfig, 'alias'> - added:
interface IPXRuntimeConfig extends Omit<CoreIPXOptions, 'storage' | 'httpStorage'> - added:
property IPXOptions.modifiers: Partial<IPXModifiers> - added:
property IPXRuntimeConfig.baseURL: string - added:
property IPXRuntimeConfig.fs: NodeFSSOptions - added:
property IPXRuntimeConfig.http: HTTPStorageOptions
- removed:
const getImage: ProviderGetImage - removed:
export { supportsAlias } from './ipx' - removed:
export { validateDomains } from './ipx' - added:
const _default: () => import('../../module.js').ImageProvider<Partial<IPXOptions>> - added:
default _default
- removed:
export * from './edgio'
- removed:
const getImage: ProviderGetImage - removed:
const operationsGenerator: (modifiers?: { [key: string]: string }) => string - added:
const _default: () => import('../../module.js').ImageProvider<NetlifyImageCDNOptions> - added:
default _default
- removed:
const getImage: ProviderGetImage - removed:
const operationsGenerator: (modifiers?: { [key: string]: string }) => string - added:
const _default: () => import('../../module.js').ImageProvider<NetlifyLargeMediaOptions> - added:
default _default
- removed:
const getImage: ProviderGetImage - added:
const _default: () => import('../../module.js').ImageProvider<unknown> - added:
default _default
- added:
const _default: () => import('../../module.js').ImageProvider<PicsumOptions> - added:
const picsumCDN = 'https://picsum.photos/' - added:
default _default
- added:
const _default: () => import('../../module.js').ImageProvider<PreprImageOptions> - added:
default _default - added:
function formatter(key: string, value: string): string
- removed:
function formatter(key: string, value: string): string
- removed:
const getImage: PreprProviderGetImage
- removed:
export * from './getImage'
- removed:
const keyMap: { readonly crop: 'c'; readonly format: 'format'; readonly height: 'h'; readonly quality: 'q'; readonly width: 'w' } - removed:
type KeyMapKey = keyof typeof keyMap - removed:
type KeyMapValue = typeof keyMap[KeyMapKey]
- removed:
const valueMap: { readonly format: { readonly jpeg: 'jpg' }; readonly fit: { readonly cover: 'crop' } } - removed:
type ValuesMapKey = keyof typeof valueMap - removed:
type ValuesMapValue = typeof valueMap[ValuesMapKey]
- removed:
const getImage: ProviderGetImage - removed:
const prismicCDN = 'https://images.prismic.io/' - added:
const _default: () => import('../../module.js').ImageProvider<PrismicOptions> - added:
default _default
- removed:
const getImage: ProviderGetImage - added:
const _default: () => import('../../module.js').ImageProvider<SanityOptions> - added:
default _default
- added:
const _default: () => import('../../module.js').ImageProvider<ShopifyOptions> - added:
default _default
- removed:
const getImage: ProviderGetImage - removed:
const operationsGenerator: (modifiers?: { [key: string]: string }) => string - added:
const _default: () => import('../../module.js').ImageProvider<SirvOptions> - added:
default _default
- removed:
const getImage: ProviderGetImage - added:
const _default: () => import('../../module.js').ImageProvider<StoryblokOptions> - added:
default _default
- removed:
const getImage: ProviderGetImage - removed:
const validateDomains = true - added:
const _default: () => import('../../module.js').ImageProvider<StrapiOptions> - added:
default _default
- removed:
const getImage: ProviderGetImage - added:
const _default: () => import('../../module.js').ImageProvider<StrapiOptions> - added:
default _default
- added:
const _default: () => import('../../module.js').ImageProvider<SupabaseOptions> - added:
default _default
- removed:
const getImage: ProviderGetImage - added:
const _default: () => import('../../module.js').ImageProvider<TwicpicsOptions> - added:
default _default
- added:
const _default: () => import('../../module.js').ImageProvider<UmbracoImageOptions> - added:
default _default
- removed:
const getImage: ProviderGetImage - added:
const _default: () => import('../../module.js').ImageProvider<UnsplashOptions> - added:
default _default
- removed:
const getImage: ProviderGetImage - added:
const _default: () => import('../../module.js').ImageProvider<Partial<UploadcareOptions>> - added:
default _default - added:
interface UploadcareModifiers extends ImageModifiers - added:
interface UploadcareOptions - 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.stretch: string - 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>
- removed:
const getImage: ProviderGetImage - removed:
const validateDomains = true - added:
const _default: () => import('../../module.js').ImageProvider<VercelOptions> - added:
default _default
- removed:
const getImage: ProviderGetImage - added:
const _default: () => import('../../module.js').ImageProvider<WagtailOptions> - added:
default _default
- removed:
const getImage: ProviderGetImage - changed:
interface WeservOptions extends ImageOptions → interface WeservOptions - added:
const _default: () => import('../../module.js').ImageProvider<WeservOptions> - added:
default _default - added:
property WeservOptions.modifiers?: { background?: string; pixelDensity?: string; trimImage?: string; sharpen?: string; brightness?: string; saturation?: string; hue?: string; filter?: string; gamma?: string; contrast?: string; blur?: string; mirror?: string; rotate?: string; mask?: string; maskTrim?: string; maskBackground?: string }
- added:
const _default: import('nuxt/server').EventHandler<Response | Promise<Response>> - added:
default _default
- added:
const _default: import('h3').EventHandler<import('h3').EventHandlerRequest, Promise<Response>> - added:
default _default
- changed:
const useImage: (event?: H3Event) => Img → const useImage: (event?: RequestEvent) => Img
- added:
const useImage: (event?: H3Event) => Img
- added:
type DataAttributes = Record<`data-${string}`, string>
- removed:
default function imageFetch(url: string): Promise<Response> - removed:
function cleanDoubleSlashes(path?: string): string - removed:
function generateAlt(src?: string): string | undefined - removed:
function getFileExtension(url?: string): string - removed:
function getInt(x: unknown): number | undefined - removed:
function renderAttributesToString(attributes?: Attrs): string - removed:
function renderTag(tag: string, attrs: Attrs, contents?: string): string - changed:
function createMapper(map: any): (key?: string) => any → function createMapper<Key extends string, Value>(map: Partial<Record<Key, Value>> & { missingValue?: Value }): Mapper<Key, Value> - changed:
function createOperationsGenerator({ formatter, keyMap, joinWith, valueMap }?: OperationGeneratorConfig): (modifiers?: { [key: string]: string }) => string → function createOperationsGenerator<ModifierKey extends string, ModifierValue = string | boolean | number, FinalKey = ModifierKey, FinalValue = ModifierValue>(config?: OperationGeneratorConfig<ModifierKey, ModifierValue, FinalKey, FinalValue>): (modifiers: Partial<Record<Extract<ModifierKey | FinalKey, string>, ModifierValue | FinalValue>>) => string - added:
call Mapper(): undefined - added:
call Mapper(key: Key): Value | Key - added:
interface Mapper<Key, Value> - added:
type InferModifiers<T extends (modifiers: any) => string> = T extends (modifiers: infer Modifiers) => string ? Modifiers : Record<string, unknown>
- changed:
function prerenderStaticImages(src?: string, srcset?: string, event?: H3Event): void → function prerenderStaticImages(src?: string, srcset?: string, event?: CreateImageOptions['event']): void
- added:
const useImageProps: <Provider extends keyof ConfiguredImageProviders>(props: BaseImageProps<Provider>) => { providerOptions: import('vue').ComputedRef<{ provider: Provider | undef… - added:
interface BaseImageProps<Provider extends keyof ConfiguredImageProviders> - added:
property BaseImageProps.background?: string - added:
property BaseImageProps.crossorigin?: 'anonymous' | 'use-credentials' | boolean - added:
property BaseImageProps.densities?: string - added:
property BaseImageProps.fit?: string - added:
property BaseImageProps.format?: string - added:
property BaseImageProps.height?: string | number - added:
property BaseImageProps.modifiers?: Partial<Omit<ImageModifiers, 'format' | 'quality' | 'background' | 'fit'>> & ('modifiers' extends keyof ConfiguredImageProviders[Provider] ? ConfiguredImageProviders[Provider]['modifiers'] : Record<string, unknown>) - added:
property BaseImageProps.nonce?: string - added:
property BaseImageProps.preload?: boolean | { fetchPriority: 'auto' | 'high' | 'low' } - added:
property BaseImageProps.preset?: string - added:
property BaseImageProps.provider?: Provider - added:
property BaseImageProps.quality?: string | number - added:
property BaseImageProps.sizes?: string | Record<string, any> - added:
property BaseImageProps.src?: string - added:
property BaseImageProps.width?: string | number
- added:
function defineProvider<T>(setup: ImageProvider<T> | (() => ImageProvider<T>)): () => ImageProvider<T>
- removed:
type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any> - added:
export { $Img } from './module' - added:
export { ConfiguredImageProviders } from './module' - added:
export { CreateImageOptions } from './module' - added:
export { ImageCTX } from './module' - added:
export { ImageInfo } from './module' - added:
export { ImageModifiers } from './module' - added:
export { ImageModuleProvider } from './module' - added:
export { ImageOptions } from './module' - added:
export { ImageProvider } from './module' - added:
export { ImageProviders } from './module' - added:
export { ImageSizes } from './module' - added:
export { ImageSizesOptions } from './module' - added:
export { ImageSizesVariant } from './module' - added:
export { Img } from './module' - added:
export { InputProvider } from './module' - added:
export { ModuleOptions } from './module' - added:
export { OperationGeneratorConfig } from './module' - added:
export { OperationMapper } from './module' - added:
export { ProviderDefaults } from './module' - added:
export { ProviderGetImage } from './module' - added:
export { ProviderSetup } from './module' - added:
export { ResolvedImage } from './module' - added:
export { ResolvedImageModifiers } from './module'