Adding images to post content using Portable Text and Sanity image URL builder.

/**
 * This component uses Portable Text to render a post body.
 *
 * You can learn more about Portable Text on:
 * <https://www.sanity.io/docs/block-content>
 * <https://github.com/portabletext/react-portabletext>
 * <https://portabletext.org/>
 *
 */
import { PortableText } from '@portabletext/react'
import urlBuilder from '@sanity/image-url'
import {getImageDimensions} from '@sanity/asset-utils'
import styles from './PostBody.module.css'

export default function PostBody({ content }) {
  const myPortableTextComponents = {
    types: {
      image: ({value, isInline}) => <img src={urlBuilder().image(value).width(isInline ? 100 : 800).fit('max').auto('format').url()} />
    },
  }
  return (
    <div className={`mx-auto max-w-2xl ${styles.portableText}`}>
      <PortableText 
        value={content}
        components={myPortableTextComponents}
      />
    </div>
  )
}

<https://cdn.sanity.io/images/undefined/undefined/e56314589c88b2176be111f72f9dc5ff7cb4d186-360x360.jpg?w=800&fit=max&auto=format>

/**
 * This component uses Portable Text to render a post body.
 *
 * You can learn more about Portable Text on:
 * <https://www.sanity.io/docs/block-content>
 * <https://github.com/portabletext/react-portabletext>
 * <https://portabletext.org/>
 *
 */
import { PortableText } from '@portabletext/react'
import { apiVersion, dataset, projectId } from 'lib/sanity.api'
import urlBuilder from '@sanity/image-url'
import { createClient } from 'next-sanity'
import {getImageDimensions} from '@sanity/asset-utils'
import styles from './PostBody.module.css'

export default function PostBody({ content }) {
  const client = createClient({ projectId, dataset, apiVersion, useCdn: false })
  const SampleImageComponent = ({value, isInline}) => {
    const {width, height} = getImageDimensions(value)
    return (
      <img
        src={urlBuilder(client)
          .image(value)
          .width(isInline ? 100 : 800)
          .fit('max')
          .auto('format')
          .url()}
        alt={value.alt || ' '}
        loading="lazy"
        style={{
          // Display alongside text if image appears inside a block text span
          display: isInline ? 'inline-block' : 'block',
  
          // Avoid jumping around with aspect-ratio CSS property
          aspectRatio: width / height,
        }}
      />
    )
  }
  const components = {
    types: {
      image: SampleImageComponent,
      // Any other custom types you have in your content
      // Examples: mapLocation, contactForm, code, featuredProjects, latestNews, etc.
    },
  }
  return (
    <div className={`mx-auto max-w-2xl ${styles.portableText}`}>
      <PortableText 
        value={content}
        components={components}
      />
    </div>
  )
}