Discussion about troubleshooting image display in Sanity.io using Portable Text and Tailwind CSS.

I can see from your description that you're running into a common issue with rendering images in Portable Text (block content). The text is showing up fine, but images aren't rendering. This typically happens because image references in Portable Text aren't automatically resolved - you need to handle them explicitly.

The Problem

When you add images to a Portable Text field in Sanity, they're stored as references to asset objects rather than complete image data. These references need to be manually resolved in both your GROQ query and your rendering component.

The Solution

You need to do two things:

1. Update your GROQ query to resolve image references

You need to explicitly resolve the asset reference for images within your Portable Text field:

*[_type=="yourDocumentType"]{
  title,
  body[] {
    ...,
    _type == "image" => {
      "image": asset->url
    }
  }
}

The key part is body[] { ..., _type == "image" => { "image": asset->url } } which loops through your Portable Text blocks and resolves any image assets. The ... means "include everything else as-is", and the _type == "image" => part is a conditional that only applies to image blocks.

2. Migrate to @portabletext/react

If you're using @sanity/block-content-to-react, that library is now deprecated. You should migrate to the modern @portabletext/react library:

npm install @portabletext/react

Then update your component:

import { PortableText } from '@portabletext/react'

const components = {
  types: {
    image: ({value}) => <img src={value.image} alt="" />
  }
}

// In your component
<PortableText value={yourContent} components={components} />

Important: With @portabletext/react, the prop name changed from node to value, so you access the image URL as value.image instead of node.image.

Optional Enhancements

You can query additional image metadata for better styling control:

_type == "image" => {
  "image": asset->url,
  "dimensions": {
    "width": asset->metadata.dimensions.width,
    "height": asset->metadata.dimensions.height,
    "aspectRatio": asset->metadata.dimensions.aspectRatio
  }
}

You can also add custom fields to your image schema (like a "full width" toggle) that you can query and use to control rendering in your component.

The Sanity documentation on presenting block text has a complete migration guide covering the API differences between the old and new libraries.