How to render images in rich text block with components.types prop?

When you add an image to your rich text blog post and see the error Unknown block type "image", specify a component for it in the components.types prop, it means you need to tell the Portable Text renderer how to display images.

Here's how to fix it:

Solution for @portabletext/react

If you're using the modern @portabletext/react library, add an image component to your components configuration:

import {PortableText} from '@portabletext/react'
import imageUrlBuilder from '@sanity/image-url'
import {createClient} from '@sanity/client'

const client = createClient({
  projectId: 'your-project-id',
  dataset: 'your-dataset',
  apiVersion: '2023-05-03',
  useCdn: true
})

const builder = imageUrlBuilder(client)

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

const components = {
  types: {
    image: ({value}) => {
      if (!value?.asset?._ref) {
        return null
      }
      return (
        <img
          alt={value.alt || ' '}
          loading="lazy"
          src={urlFor(value).width(800).url()}
        />
      )
    }
  }
}

// Then use it:
<PortableText value={yourContent} components={components} />

Key Points

1. Install the image URL builder if you haven't already:

   npm install @sanity/image-url

2. The components.types prop is where you define custom renderers for different block types in your Portable Text

3. Access image data through value.asset._ref - this is the reference to the image in Sanity

4. Use imageUrlBuilder to generate optimized image URLs with transformations like width, height, and format

You can customize this further by adding responsive images, different sizes, or styling. The Presenting Portable Text guide has more examples of customizing how different content types render.