@teamnovu/nuxt-image 0.5.5 → 1.0.0-beta.1

package/dist/runtime/components/NovuImage.vue

@@ -0,0 +1,90 @@
+<script setup>
+import { computed, useTemplateRef } from "vue";
+import { useRuntimeConfig } from "#imports";
+import { useResponsiveImage } from "../composables/useResponsiveImage";
+import { toFiniteNumber } from "../utils/numbers";
+const props = defineProps({
+  src: { type: String, required: true },
+  alt: { type: String, required: false, default: void 0 },
+  width: { type: [Number, String], required: false, default: void 0 },
+  height: { type: [Number, String], required: false, default: void 0 },
+  sourceWidth: { type: [Number, String], required: false, default: void 0 },
+  sourceHeight: { type: [Number, String], required: false, default: void 0 },
+  aspectRatio: { type: Number, required: false, default: void 0 },
+  quality: { type: [Number, String], required: false, default: void 0 },
+  format: { type: String, required: false, default: void 0 },
+  fit: { type: String, required: false, default: void 0 },
+  focal: { type: [String, Array], required: false, default: void 0 },
+  modifiers: { type: Object, required: false, default: void 0 },
+  provider: { type: String, required: false, default: void 0 },
+  sizes: { type: String, required: false, default: void 0 },
+  loading: { type: String, required: false, default: "lazy" },
+  decoding: { type: String, required: false, default: "async" },
+  priority: { type: Boolean, required: false, default: false },
+  fallbackWidth: { type: Number, required: false, default: void 0 },
+  usePlaceholder: { type: Boolean, required: false, default: void 0 },
+  placeholderQuality: { type: Number, required: false, default: void 0 },
+  placeholderWidth: { type: Number, required: false, default: void 0 },
+  placeholderSrc: { type: String, required: false, default: void 0 }
+});
+const runtimeConfig = useRuntimeConfig().public.novuImage;
+const effectiveProvider = computed(() => props.provider ?? runtimeConfig.provider);
+const effectiveQuality = computed(() => props.quality ?? runtimeConfig.defaultQuality);
+const effectiveFormat = computed(() => props.format ?? runtimeConfig.defaultFormat);
+const effectiveFallbackWidth = computed(() => props.fallbackWidth ?? runtimeConfig.fallbackWidth);
+const effectiveUsePlaceholder = computed(() => props.usePlaceholder ?? runtimeConfig.usePlaceholder);
+const effectivePlaceholderQuality = computed(() => props.placeholderQuality ?? runtimeConfig.placeholderQuality);
+const effectivePlaceholderWidth = computed(() => props.placeholderWidth ?? runtimeConfig.placeholderWidth);
+const imgRef = useTemplateRef("imgRef");
+const { srcset, sizes, fallbackUrl } = useResponsiveImage({
+  src: () => props.src,
+  width: () => props.width,
+  height: () => props.height,
+  sourceWidth: () => props.sourceWidth,
+  sourceHeight: () => props.sourceHeight,
+  aspectRatio: () => props.aspectRatio,
+  quality: effectiveQuality,
+  format: effectiveFormat,
+  fit: () => props.fit,
+  modifiers: () => props.modifiers,
+  provider: effectiveProvider,
+  focal: () => props.focal,
+  sizes: () => props.sizes,
+  fallbackWidth: effectiveFallbackWidth,
+  usePlaceholder: effectiveUsePlaceholder,
+  placeholderQuality: effectivePlaceholderQuality,
+  placeholderWidth: effectivePlaceholderWidth,
+  placeholderSrc: () => props.placeholderSrc,
+  screens: () => runtimeConfig.screens,
+  imgRef
+});
+const aspectRatioStyle = computed(() => {
+  const explicit = props.aspectRatio;
+  if (explicit && Number.isFinite(explicit) && explicit > 0) {
+    return { aspectRatio: String(explicit) };
+  }
+  const w = toFiniteNumber(props.width);
+  const h = toFiniteNumber(props.height);
+  if (w && h) return { aspectRatio: `${w} / ${h}` };
+  return void 0;
+});
+const effectiveLoading = computed(() => props.priority ? "eager" : props.loading);
+const fetchPriority = computed(() => props.priority ? "high" : "auto");
+</script>
+
+<template>
+  <img
+    v-if="src"
+    ref="imgRef"
+    :src="fallbackUrl"
+    :srcset="srcset"
+    :sizes="sizes"
+    :alt="alt ?? ''"
+    :width="width"
+    :height="height"
+    :loading="effectiveLoading"
+    :decoding="decoding"
+    :fetchpriority="fetchPriority"
+    :style="aspectRatioStyle"
+  >
+</template>

package/dist/runtime/components/NovuImage.vue.d.ts

@@ -0,0 +1,28 @@
+import type { FocalPoint } from '../utils/focal.js';
+export interface NovuImageProps {
+    src: string;
+    alt?: string;
+    width?: number | string;
+    height?: number | string;
+    sourceWidth?: number | string;
+    sourceHeight?: number | string;
+    aspectRatio?: number;
+    quality?: number | string;
+    format?: string;
+    fit?: string;
+    focal?: FocalPoint;
+    modifiers?: Record<string, unknown>;
+    provider?: string;
+    sizes?: string;
+    loading?: 'lazy' | 'eager';
+    decoding?: 'async' | 'sync' | 'auto';
+    priority?: boolean;
+    fallbackWidth?: number;
+    usePlaceholder?: boolean;
+    placeholderQuality?: number;
+    placeholderWidth?: number;
+    placeholderSrc?: string;
+}
+declare const __VLS_export: import("vue").DefineComponent<NovuImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NovuImageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/NovuImgproxyImage.d.vue.ts

@@ -0,0 +1,12 @@
+import type { NovuImageProps } from './NovuImage.vue.js';
+import type { ImgproxyResizingType } from '../providers/imgproxy.js';
+export interface NovuImgproxyImageProps extends Omit<NovuImageProps, 'provider'> {
+    preset?: string;
+    /** Raw imgproxy gravity string (e.g. `'sm'`, `'ce'`, `'fp:0.5:0.5'`). Overrides `focal`. */
+    gravity?: string;
+    resizingType?: ImgproxyResizingType;
+    extend?: boolean;
+}
+declare const __VLS_export: import("vue").DefineComponent<NovuImgproxyImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NovuImgproxyImageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/NovuImgproxyImage.vue

@@ -0,0 +1,68 @@
+<script setup>
+import { computed } from "vue";
+import NovuImage from "./NovuImage.vue";
+const props = defineProps({
+  preset: { type: String, required: false, default: void 0 },
+  gravity: { type: String, required: false, default: void 0 },
+  resizingType: { type: String, required: false, default: void 0 },
+  extend: { type: Boolean, required: false, default: void 0 },
+  src: { type: String, required: true },
+  alt: { type: String, required: false },
+  width: { type: [Number, String], required: false },
+  height: { type: [Number, String], required: false },
+  sourceWidth: { type: [Number, String], required: false },
+  sourceHeight: { type: [Number, String], required: false },
+  aspectRatio: { type: Number, required: false },
+  quality: { type: [Number, String], required: false },
+  format: { type: String, required: false },
+  fit: { type: String, required: false },
+  focal: { type: [String, Array], required: false },
+  modifiers: { type: Object, required: false },
+  sizes: { type: String, required: false },
+  loading: { type: String, required: false },
+  decoding: { type: String, required: false },
+  priority: { type: Boolean, required: false },
+  fallbackWidth: { type: Number, required: false },
+  usePlaceholder: { type: Boolean, required: false },
+  placeholderQuality: { type: Number, required: false },
+  placeholderWidth: { type: Number, required: false },
+  placeholderSrc: { type: String, required: false }
+});
+const imgproxyModifiers = computed(() => {
+  const out = { ...props.modifiers ?? {} };
+  if (props.preset !== void 0) out.preset = props.preset;
+  if (props.gravity !== void 0) out.gravity = props.gravity;
+  if (props.resizingType !== void 0) out.resizingType = props.resizingType;
+  if (props.extend !== void 0) out.extend = props.extend;
+  return out;
+});
+const effectiveFocal = computed(() => props.gravity !== void 0 ? void 0 : props.focal);
+</script>
+
+<template>
+  <NovuImage
+    v-bind="$attrs"
+    :src="src"
+    :alt="alt"
+    :width="width"
+    :height="height"
+    :source-width="sourceWidth"
+    :source-height="sourceHeight"
+    :aspect-ratio="aspectRatio"
+    :quality="quality"
+    :format="format"
+    :fit="fit"
+    :focal="effectiveFocal"
+    :modifiers="imgproxyModifiers"
+    :sizes="sizes"
+    :loading="loading"
+    :decoding="decoding"
+    :priority="priority"
+    :fallback-width="fallbackWidth"
+    :use-placeholder="usePlaceholder"
+    :placeholder-quality="placeholderQuality"
+    :placeholder-width="placeholderWidth"
+    :placeholder-src="placeholderSrc"
+    provider="imgproxy"
+  />
+</template>

package/dist/runtime/components/NovuImgproxyImage.vue.d.ts

@@ -0,0 +1,12 @@
+import type { NovuImageProps } from './NovuImage.vue.js';
+import type { ImgproxyResizingType } from '../providers/imgproxy.js';
+export interface NovuImgproxyImageProps extends Omit<NovuImageProps, 'provider'> {
+    preset?: string;
+    /** Raw imgproxy gravity string (e.g. `'sm'`, `'ce'`, `'fp:0.5:0.5'`). Overrides `focal`. */
+    gravity?: string;
+    resizingType?: ImgproxyResizingType;
+    extend?: boolean;
+}
+declare const __VLS_export: import("vue").DefineComponent<NovuImgproxyImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NovuImgproxyImageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/NovuStatamicImage.d.vue.ts

@@ -0,0 +1,17 @@
+import type { FocalPoint } from '../utils/focal.js';
+import type { StatamicAsset } from '../types.js';
+export interface NovuStatamicImageProps {
+    src?: string | StatamicAsset | null;
+    provider?: string;
+    alt?: string;
+    fallbackAlt?: string;
+    locale?: string;
+    focal?: FocalPoint;
+    width?: number | string;
+    height?: number | string;
+    aspectRatio?: number;
+    placeholderField?: string | string[];
+}
+declare const __VLS_export: import("vue").DefineComponent<NovuStatamicImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NovuStatamicImageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/NovuStatamicImage.vue

@@ -0,0 +1,87 @@
+<script setup>
+import { computed, useAttrs } from "vue";
+import { useNuxtApp, useRuntimeConfig } from "#imports";
+import NovuImage from "./NovuImage.vue";
+import NovuCloudinaryImage from "./NovuCloudinaryImage.vue";
+import NovuBunnyImage from "./NovuBunnyImage.vue";
+import NovuImgproxyImage from "./NovuImgproxyImage.vue";
+import { resolveStatamicAsset } from "../utils/statamic";
+import { getI18nLocale } from "../utils/i18n";
+import { toFiniteNumber } from "../utils/numbers";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  src: { type: [String, Object, null], required: false, default: void 0 },
+  provider: { type: String, required: false, default: void 0 },
+  alt: { type: String, required: false, default: void 0 },
+  fallbackAlt: { type: String, required: false, default: void 0 },
+  locale: { type: String, required: false, default: void 0 },
+  focal: { type: [String, Array], required: false, default: void 0 },
+  width: { type: [Number, String], required: false, default: void 0 },
+  height: { type: [Number, String], required: false, default: void 0 },
+  aspectRatio: { type: Number, required: false, default: void 0 },
+  placeholderField: { type: [String, Array], required: false, default: void 0 }
+});
+const runtimeConfig = useRuntimeConfig().public.novuImage;
+const nuxtApp = useNuxtApp();
+const attrs = useAttrs();
+const i18nLocale = computed(() => getI18nLocale(nuxtApp));
+const effectiveLocale = computed(() => props.locale ?? i18nLocale.value);
+const effectiveProvider = computed(() => props.provider ?? runtimeConfig.provider);
+const resolved = computed(
+  () => resolveStatamicAsset(
+    props.src,
+    {
+      alt: props.alt,
+      fallbackAlt: props.fallbackAlt,
+      focal: props.focal,
+      width: toFiniteNumber(props.width),
+      height: toFiniteNumber(props.height),
+      aspectRatio: props.aspectRatio,
+      placeholderField: props.placeholderField
+    },
+    {
+      locale: effectiveLocale.value,
+      provider: effectiveProvider.value,
+      statamicPlaceholderFields: runtimeConfig.statamicPlaceholderFields
+    }
+  )
+);
+const wrapperByProvider = {
+  cloudinary: NovuCloudinaryImage,
+  bunny: NovuBunnyImage,
+  imgproxy: NovuImgproxyImage
+};
+const resolvedComponent = computed(() => {
+  const provider = effectiveProvider.value;
+  if (provider && provider in wrapperByProvider) {
+    return wrapperByProvider[provider];
+  }
+  return NovuImage;
+});
+const imageProps = computed(() => {
+  const base = {
+    src: resolved.value.src ?? "",
+    alt: resolved.value.alt,
+    focal: resolved.value.focal,
+    width: resolved.value.width,
+    height: resolved.value.height,
+    sourceWidth: resolved.value.sourceWidth,
+    sourceHeight: resolved.value.sourceHeight,
+    aspectRatio: resolved.value.aspectRatio,
+    placeholderSrc: resolved.value.placeholderSrc
+  };
+  if (resolvedComponent.value === NovuImage) {
+    return { ...base, provider: effectiveProvider.value };
+  }
+  return base;
+});
+const componentBindings = computed(() => ({ ...attrs, ...imageProps.value }));
+</script>
+
+<template>
+  <component
+    :is="resolvedComponent"
+    v-if="resolved.src"
+    v-bind="componentBindings"
+  />
+</template>

package/dist/runtime/components/NovuStatamicImage.vue.d.ts

@@ -0,0 +1,17 @@
+import type { FocalPoint } from '../utils/focal.js';
+import type { StatamicAsset } from '../types.js';
+export interface NovuStatamicImageProps {
+    src?: string | StatamicAsset | null;
+    provider?: string;
+    alt?: string;
+    fallbackAlt?: string;
+    locale?: string;
+    focal?: FocalPoint;
+    width?: number | string;
+    height?: number | string;
+    aspectRatio?: number;
+    placeholderField?: string | string[];
+}
+declare const __VLS_export: import("vue").DefineComponent<NovuStatamicImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NovuStatamicImageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/composables/useResponsiveImage.d.ts

@@ -0,0 +1,42 @@
+import type { MaybeRefOrGetter, Ref } from 'vue';
+import type { FocalPoint } from '../utils/focal.js';
+export interface UseResponsiveImageOptions {
+    src: MaybeRefOrGetter<string | undefined | null>;
+    width?: MaybeRefOrGetter<number | string | undefined>;
+    height?: MaybeRefOrGetter<number | string | undefined>;
+    sourceWidth?: MaybeRefOrGetter<number | string | undefined>;
+    sourceHeight?: MaybeRefOrGetter<number | string | undefined>;
+    aspectRatio?: MaybeRefOrGetter<number | undefined>;
+    quality?: MaybeRefOrGetter<number | string | undefined>;
+    format?: MaybeRefOrGetter<string | undefined>;
+    fit?: MaybeRefOrGetter<string | undefined>;
+    modifiers?: MaybeRefOrGetter<Record<string, unknown> | undefined>;
+    provider?: MaybeRefOrGetter<string | undefined>;
+    focal?: MaybeRefOrGetter<FocalPoint | undefined>;
+    sizes?: MaybeRefOrGetter<string | undefined>;
+    fallbackWidth: MaybeRefOrGetter<number>;
+    usePlaceholder: MaybeRefOrGetter<boolean>;
+    placeholderQuality: MaybeRefOrGetter<number>;
+    placeholderWidth: MaybeRefOrGetter<number>;
+    placeholderSrc?: MaybeRefOrGetter<string | undefined>;
+    screens: MaybeRefOrGetter<Record<string, number | string>>;
+    imgRef: Readonly<Ref<HTMLImageElement | null>>;
+}
+interface ElementSize {
+    width: number;
+    height: number;
+}
+export declare function useResponsiveImage(options: UseResponsiveImageOptions): {
+    srcset: import("vue").ComputedRef<string | undefined>;
+    sizes: import("vue").ComputedRef<string>;
+    placeholderSrc: import("vue").ComputedRef<string | undefined>;
+    fallbackUrl: import("vue").ComputedRef<string | undefined>;
+    elementSize: Ref<{
+        width: number;
+        height: number;
+    } | null, ElementSize | {
+        width: number;
+        height: number;
+    } | null>;
+};
+export {};

package/dist/runtime/composables/useResponsiveImage.js

@@ -0,0 +1,115 @@
+import { computed, ref, toValue } from "vue";
+import { useResizeObserver } from "@vueuse/core";
+import { useImage } from "#imports";
+import { parseScreens } from "../utils/screens.js";
+import { applyFocal, defaultFocalForProvider } from "../utils/focal.js";
+import { transformProviderModifiers } from "../utils/providerModifiers.js";
+import { toFiniteNumber } from "../utils/numbers.js";
+const PLACEHOLDER_DESCRIPTOR = "32w";
+export function useResponsiveImage(options) {
+  const $img = useImage();
+  const breakpointWidths = computed(() => parseScreens(toValue(options.screens)));
+  const intrinsicAspectRatio = computed(() => {
+    return resolveImageAspectRatio(
+      toValue(options.aspectRatio),
+      toFiniteNumber(toValue(options.width)),
+      toFiniteNumber(toValue(options.height))
+    );
+  });
+  const baseModifiers = computed(() => {
+    const explicitFocal = toValue(options.focal);
+    const provider = toValue(options.provider);
+    const focal = explicitFocal ?? defaultFocalForProvider(provider);
+    const sourceW = toFiniteNumber(toValue(options.sourceWidth)) ?? toFiniteNumber(toValue(options.width));
+    const sourceH = toFiniteNumber(toValue(options.sourceHeight)) ?? toFiniteNumber(toValue(options.height));
+    const quality = toValue(options.quality);
+    const format = toValue(options.format);
+    const fit = toValue(options.fit);
+    const extra = toValue(options.modifiers) ?? {};
+    const focalModifiers = applyFocal(provider, focal, { width: sourceW, height: sourceH });
+    return {
+      ...explicitFocal === void 0 ? focalModifiers : {},
+      ...extra,
+      ...quality !== void 0 ? { quality } : {},
+      ...format !== void 0 ? { format } : {},
+      ...explicitFocal !== void 0 ? focalModifiers : {},
+      ...fit !== void 0 ? { fit } : {}
+    };
+  });
+  const renderUrl = (src, modifiers) => {
+    const provider = toValue(options.provider);
+    const callOptions = provider ? { provider } : {};
+    return $img(src, modifiers, callOptions);
+  };
+  const candidateModifiers = (width) => {
+    const ar = intrinsicAspectRatio.value;
+    const base = {
+      ...baseModifiers.value,
+      width,
+      ...ar !== void 0 ? { height: Math.round(width / ar) } : {}
+    };
+    return transformProviderModifiers(toValue(options.provider), base);
+  };
+  const placeholderSrc = computed(() => {
+    const custom = toValue(options.placeholderSrc);
+    if (custom) return custom;
+    if (!toValue(options.usePlaceholder)) return void 0;
+    const src = toValue(options.src);
+    if (!src) return void 0;
+    return renderUrl(src, {
+      ...candidateModifiers(toValue(options.placeholderWidth)),
+      quality: toValue(options.placeholderQuality)
+    });
+  });
+  const srcset = computed(() => {
+    const src = toValue(options.src);
+    if (!src) return void 0;
+    const widths = breakpointWidths.value;
+    if (!widths.length) return void 0;
+    const entries = widths.map((w) => `${renderUrl(src, candidateModifiers(w))} ${w}w`);
+    const placeholder = placeholderSrc.value;
+    if (placeholder) entries.push(`${placeholder} ${PLACEHOLDER_DESCRIPTOR}`);
+    return entries.join(", ");
+  });
+  const fallbackUrl = computed(() => {
+    const src = toValue(options.src);
+    if (!src) return void 0;
+    return renderUrl(src, candidateModifiers(toValue(options.fallbackWidth)));
+  });
+  const elementSize = ref(null);
+  useResizeObserver(options.imgRef, ([entry]) => {
+    if (!entry) return;
+    const { width, height } = entry.contentRect;
+    elementSize.value = { width, height };
+  });
+  const sizes = computed(() => {
+    const override = toValue(options.sizes);
+    if (override) return override;
+    const size = elementSize.value;
+    if (!size || size.width <= 0) return "1px";
+    const el = options.imgRef.value;
+    const objectFit = el ? readObjectFit(el) : "fill";
+    const containerAspect = size.height > 0 ? size.width / size.height : 0;
+    const imgAspect = intrinsicAspectRatio.value;
+    if (objectFit === "cover" && imgAspect !== void 0 && containerAspect > 0 && imgAspect > containerAspect) {
+      return `${Math.ceil(size.height * imgAspect)}px`;
+    }
+    return `${Math.ceil(size.width)}px`;
+  });
+  return {
+    srcset,
+    sizes,
+    placeholderSrc,
+    fallbackUrl,
+    elementSize
+  };
+}
+function readObjectFit(el) {
+  if (typeof window === "undefined") return "fill";
+  return window.getComputedStyle(el).objectFit || "fill";
+}
+function resolveImageAspectRatio(explicitRatio, width, height) {
+  if (explicitRatio && Number.isFinite(explicitRatio) && explicitRatio > 0) return explicitRatio;
+  if (width && height && width > 0 && height > 0) return width / height;
+  return void 0;
+}

package/dist/runtime/providers/imgproxy.d.ts

@@ -0,0 +1,68 @@
+import type { ImageModifiers, ProviderGetImage } from '@nuxt/image';
+export type ImgproxyResizingType = 'fit' | 'fill' | 'fill-down' | 'force' | 'auto';
+export type ImgproxyGravityType = 'ce' | 'no' | 'so' | 'ea' | 'we' | 'noea' | 'nowe' | 'soea' | 'sowe';
+export interface ImgproxyCrop {
+    width: number;
+    height: number;
+    gravity?: ImgproxyGravityType;
+}
+export type ImgproxyFormat = 'webp' | 'png' | 'jpg' | 'jpeg' | 'jxl' | 'avif' | 'gif' | 'ico' | 'svg' | 'heic' | 'bmp' | 'tiff' | 'pdf' | 'psd' | 'mp4';
+export type ImgproxyBooleanPrimitive = string | number | boolean;
+export interface ImgproxyModifiers extends Omit<ImageModifiers, 'fit' | 'format' | 'gravity'> {
+    width: number;
+    height: number;
+    format: ImgproxyFormat;
+    fit: 'cover' | 'contain' | 'fill' | 'inside' | 'outside';
+    resizingType: ImgproxyResizingType;
+    resize: string;
+    size: string;
+    minWidth: number;
+    minHeight: number;
+    zoom: string | number;
+    dpr: number;
+    enlarge: boolean;
+    extend: boolean;
+    extendAspectRatio: string;
+    gravity: ImgproxyGravityType | string;
+    crop: ImgproxyCrop | string;
+    autoRotate: boolean;
+    rotate: number;
+    background: string;
+    blur: number;
+    sharpen: number;
+    pixelate: number;
+    stripMetadata: boolean;
+    keepCopyright: boolean;
+    stripColorProfile: boolean;
+    enforceThumbnail: boolean;
+    maxBytes: number;
+    raw: boolean;
+    cachebuster: string;
+    expires: number;
+    filename: string;
+    returnAttachment: boolean;
+    preset: string;
+    maxSrcResolution: number;
+    maxSrcFileSize: number;
+    maxAnimationFrames: number;
+    maxAnimationFrameResolution: string;
+    maxResultDimension: string;
+}
+interface ImgproxyOptions {
+    baseURL: string;
+    salt: string;
+    key: string;
+    modifiers?: Partial<ImgproxyModifiers>;
+}
+interface ImgproxyContext {
+    baseURL?: string;
+    key?: string;
+    salt?: string;
+    modifiers?: Partial<ImgproxyModifiers>;
+}
+export declare const getImage: ProviderGetImage<ImgproxyContext>;
+declare const _default: () => {
+    getImage: ProviderGetImage<ImgproxyContext>;
+};
+export default _default;
+export type { ImgproxyOptions };