How to pull image src from Sanity?

To pull image src URLs from Sanity, you'll want to use the @sanity/image-url package. This is the standard way to generate optimized image URLs from your Sanity image assets.

Quick Setup:

First, install the package:

npm install @sanity/image-url
# or
pnpm add @sanity/image-url

Then create a helper function (usually in a utils file):

import imageUrlBuilder from "@sanity/image-url";
import { client } from "./client"; // your Sanity client

const builder = imageUrlBuilder(client);

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

Usage:

Now you can use it to generate image URLs from your Sanity image fields:

import { urlFor } from './utils/imageUrl';

// In your component
const imageUrl = urlFor(sanityImageObject).url();

// With transformations
const optimizedUrl = urlFor(sanityImageObject)
  .width(800)
  .height(600)
  .format('webp')
  .url();

The sanityImageObject is what you get from your GROQ query - it's typically an object with an asset reference, not just a string.

With Next.js Image:

If you're using Next.js, you'll need to configure the domain in your next.config.js:

module.exports = {
  images: {
    remotePatterns: [
      { protocol: "https", hostname: "cdn.sanity.io" },
    ],
  },
};

Then use it like:

<Image 
  src={urlFor(image).url()} 
  alt="Description"
  width={800}
  height={600}
/>

Pro tip: The image URL builder supports tons of transformations like quality settings, cropping, format conversion (including WebP and AVIF with .auto('format')), and more. Sanity's CDN automatically caches these transformed images globally for fast delivery.