I recently came across a post from Sanity discussing how to present images hosted on their platform. It's a very well-written guide, but it's lacking one major thing: it doesn't cover how to present images embedded within Portable Text blocks.
The problem with this is that the approached laid out in that article will not work for fields that are intended to represent things like article bodies. Such fields are portable text fields in Sanity; they are basically just an indexed array of blocks where each block is a self-contained chunk of content, such as headings, individual paragraphs, and yes, images.
This guide assumes you already have a field that is configured to use Portable Text. The core information for customizing a portable text field is covered in this article from Sanity. However, it doesn't appear to cover how to actually add an image to your configuration.
To add image support to a portable text field configuration, simply add this to the of array within the field configuration:
// Example portable text config shared object
const portableTextConfig = {
type: `array`,
of: [
// Other blocks...
{
type: `image` // That's it!
}
]
}Once you have this in place, when you run your studio, you should see the image button in the rich text editor control bar:
When an image is embedded in a field that's configured to be a Portable Text field, you'll first need to make sure you have an