Presenting Images
More intuitive exports, better type support, and modernized library
v2.0.0
To support upcoming features and to better align with the patterns set by other Sanity libraries, @sanity/image-url now has a more intuitive API surface. The functionality of the library hasn't changed, but the core utilities and types are now named exports and types are easier to discover.
This is a breaking change. Follow the steps below to update to the latest version.
Upgrade steps
Update imports
All public utilities and types are now available from the default export path. No more hunting for types deep in the path.
import { createImageUrlBuilder, type SanityImageSource } from '@sanity/image-url'import imageUrlBuilder from '@sanity/image-url'
import type { SanityImageSource } from '@sanity/image-url/lib/types/types'Rename imageUrlBuilder => createImageUrlBuilder
The primary builder API is now named createImageUrlBuilder where it was previously named imageUrlBuilder. Update your code to reflect the change. If you're using the urlFor pattern, you likely only need to do this once.
import React from 'react'
import myConfiguredSanityClient from './sanityClient'
import imageUrlBuilder from '@sanity/image-url'
const builder = imageUrlBuilder(myConfiguredSanityClient)
function urlFor(source) {
return builder.image(source)
}import myConfiguredSanityClient from './sanityClient'
import {createImageUrlBuilder} from '@sanity/image-url'
const builder = createImageUrlBuilder(myConfiguredSanityClient)
function urlFor(source) {
return builder.image(source)
}Beyond adjusting your imports and updating the builder name, there are no other breaking changes.