diff --git a/packages/sanity-next/src/SanityNextVisual.tsx b/packages/sanity-next/src/SanityNextVisual.tsx index 72a1ddc..91afce8 100644 --- a/packages/sanity-next/src/SanityNextVisual.tsx +++ b/packages/sanity-next/src/SanityNextVisual.tsx @@ -1,6 +1,6 @@ import type { ReactElement } from 'react' import NextVisual from '@react-visual/next' -import { makeImageUrl, makeFileUrl, imageLoader } from './lib/urlBuilding' +import { makeImageUrl, makeFileUrl, makeImageLoader } from './lib/urlBuilding' import { aspectRatioFromSource, altTextFromSource, @@ -42,7 +42,7 @@ export default function SanityNextVisual( // Props that are calculated from Sanity data (mostly images) image={ makeImageUrl(image) } - imageLoader={ imageLoader } + imageLoader={ makeImageLoader(image) } video={ makeFileUrl(video) } aspect={ aspect || aspectRatioFromSource(image) } position={ position || objectPositionFromSource(image) } diff --git a/packages/sanity-next/src/lib/urlBuilding.ts b/packages/sanity-next/src/lib/urlBuilding.ts index ba9e9d8..1f3917e 100644 --- a/packages/sanity-next/src/lib/urlBuilding.ts +++ b/packages/sanity-next/src/lib/urlBuilding.ts @@ -1,11 +1,7 @@ import createImageUrlBuilder from '@sanity/image-url' -import { - getFileAsset, - getImage, - type SanityFileSource -} from '@sanity/asset-utils' +import { getFileAsset, type SanityFileSource } from '@sanity/asset-utils' import type { ImageUrlBuilder } from '@sanity/image-url/lib/types/builder' -import type { ImageLoaderProps } from 'next/image' +import type { ImageLoader, ImageLoaderProps } from 'next/image' import type { SanityImageSource } from '@sanity/image-url/lib/types/types' import { ObjectFit } from '@react-visual/next' @@ -54,12 +50,15 @@ export function makeImageBuilder(source: SanityImageSource, { } // Make a next/image url loader -export function imageLoader( - { src, width, quality }: ImageLoaderProps -): string { - const builder = makeImageBuilder(getImage(src)).width(width) - if (quality) builder.quality(quality) - return builder.url() +export function makeImageLoader( + source?: SanityImageSource +): ImageLoader | undefined { + if (!source) return undefined + return ({ width, quality }: ImageLoaderProps): string => { + let builder = makeImageBuilder(source, { width }) + if (quality) builder = builder.quality(quality) + return builder.url() + } } // Return the URL of an asset