Image in portable text array returns reference instead of CDN URL

This is a common issue when working with Portable Text (block content) that contains images! The problem is that Sanity returns image references (just the _ref and _type) by default, not the full CDN URLs. You need to expand these references in your GROQ query.

Update Your GROQ Query

Instead of just querying the content field directly, you need to explicitly expand the image assets within the array. Here's an example query:

*[_type == "yourDocumentType"] {
  ...,
  content[] {
    ...,
    _type == "image" => {
      ...,
      asset->
    }
  }
}

The key part is asset-> which tells GROQ to follow the reference and fetch the actual asset document, which includes the url field.

For Next.js Image Component

If you're using Next.js, you'll still want to use @sanity/image-url to build optimized URLs with transformations. When rendering your Portable Text, you'll need a custom serializer for image blocks:

import imageUrlBuilder from '@sanity/image-url'
import Image from 'next/image'

const builder = imageUrlBuilder(client)

const PortableTextComponents = {
  types: {
    image: ({value}) => {
      const imageUrl = builder.image(value).width(800).url()
      return (
        <Image 
          src={imageUrl}
          alt={value.alt || ''}
          width={800}
          height={600}
        />
      )
    }
  }
}

Why Your Separate Image Field Works

Your standalone image field likely works because you're either:

1. Using a different GROQ query that expands the reference with asset->
2. Using @sanity/image-url to build the URL from the reference

The same principles apply to images within Portable Text arrays - you just need to handle them in your query and renderer.

Make sure you've also configured your next.config.js to allow images from Sanity's CDN:

images: {
  remotePatterns: [
    { protocol: 'https', hostname: 'cdn.sanity.io' }
  ]
}

This should resolve your issue! The key takeaway is that images in Portable Text need special handling both in your query (expanding references with asset->) and in your rendering logic (using a custom serializer with @sanity/image-url).