Easy way to display a Sanity Image asset in Studio preview.

The easiest way to display Sanity images is actually simpler than you might think! Here are two straightforward approaches:

Quick Start: Get the URL directly

The simplest method is to query for the image URL in your GROQ query and use it directly:

*[_type == 'person']{
  name,
  "imageUrl": image.asset->url
}

This gives you a direct URL like https://cdn.sanity.io/images/...jpg that you can use in any <img> tag. You can then add transformation parameters to the URL:

// Auto-format for best browser support
imageUrl + '?auto=format'

// Resize to specific dimensions
imageUrl + '?w=800&h=600'

// Prevent upscaling small images
imageUrl + '?w=800&fit=max'

Better Approach: Use @sanity/image-url

For JavaScript projects, install the @sanity/image-url helper library. It handles crop/hotspot settings automatically and gives you a clean API:

npm install @sanity/image-url

Set up a reusable helper:

// sanityImageUrl.js
import { createImageUrlBuilder } from '@sanity/image-url'
import { client } from './client' // your Sanity client

const builder = createImageUrlBuilder(client)

export function urlFor(source) {
  return builder.image(source)
}

Then use it anywhere:

import { urlFor } from './sanityImageUrl'

function MyComponent({person}) {
  return (
    <img 
      src={urlFor(person.image)
        .width(800)
        .height(600)
        .url()}
      alt={person.name}
    />
  )
}

The beauty of @sanity/image-url is that it automatically respects editor crop and hotspot settings while still returning a normal URL string that works with any image component (including Next.js Image, React Native Image, etc.).

Common Gotchas

• Always add ?auto=format or use the .auto('format') method to serve optimized formats (WebP, AVIF) based on browser support
• Use fit=max to prevent small images from being upscaled
• Pass the whole image object (not just image.asset) to urlFor() so it can access crop/hotspot data

Check out the full documentation on presenting images for more details on responsive images, download links, and performance tips!