Issue with alt text not displaying for images in Sanity plugin media library.
I can help you with this! When you add custom fields like alt text to an image field in Sanity, you need to explicitly query those fields in your GROQ query to get them on the frontend.
By default, when you query an image field, GROQ only returns the asset reference. To get the custom fields you've added (like alt text), you need to expand your query to include them.
Here's how to structure your GROQ query:
*[_type == "yourDocumentType"] {
image {
asset->{
_id,
url
},
alt,
// any other custom fields you added
}
}If you defined your image schema with custom fields like this:
{
name: 'image',
title: 'Image',
type: 'image',
options: {
hotspot: true
},
fields: [
{
name: 'alt',
title: 'Alt Text',
type: 'string'
}
]
}Then your GROQ query needs to specifically ask for that alt field. The key is understanding that custom fields you add to an image type live at the same level as the asset reference, not inside it.
Here's a more complete example:
*[_type == "post"] {
title,
mainImage {
asset->{
_id,
url
},
alt,
hotspot,
crop
}
}This will return your image data structured like:
{
"mainImage": {
"asset": {
"_id": "image-abc123",
"url": "https://cdn.sanity.io/..."
},
"alt": "Your alt text here"
}
}Important note about third-party media plugins: If you're using the sanity-plugin-media (a third-party plugin), be aware that it stores metadata differently than custom fields you define in your schema. That plugin stores data on the asset document itself, so you'd need to expand the asset reference to get that data:
*[_type == "yourDocumentType"] {
image {
asset->{
_id,
url,
altText,
description,
// other fields the media plugin adds
}
}
}The Image Type documentation and this guide on displaying images have more details on working with custom fields and metadata on images.
Sanity – Build the way you think, not the way your CMS thinks
Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.