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

import createImageUrlBuilder from '@sanity/image-url'
import { sanityConfig } from './config'

export const imageBuilder = createImageUrlBuilder(sanityConfig)

export const urlForImage = (source) =>
  imageBuilder.image(source).auto('format').fit('max') // but I mostly use next-sanity-image 

const builder = imageUrlBuilder(client);

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

import { PortableText } from "@portabletext/react";
import { getImageDimensions } from "@sanity/asset-utils";
import { urlFor } from "~/lib/sanity/sanity";

const SampleImageComponent = ({ value }) => {
  const { width, height } = getImageDimensions(value);
  return (
    <img
      className="flex w-3xl"
      src={urlFor().image(value).auto("format").url()}
      alt={value.alt || " "}
      loading="lazy"
    />
  );
};

export const myPortableTextComponents = {
  types: {
    image: SampleImageComponent,
  },