Issue with alt text not displaying for images in Sanity plugin media library.

12 replies
Last updated: Mar 8, 2022
Hello everyone, please help me with this issue. The issue is:- I add sanity plugin media in the sanity dashboard. There are some options given on the Sanity plugin image widget. Like alt text and I update alt text for the image. But the issue is how I get all the data on the front end. I don't get any alt text on Groq. Only getting the image URL.
AI Update

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.

hey
user A
the GROQ query is:-
*[_type == "page" && !(_id in path('drafts.**'))][0] {"id": _id, ...}
Here is console data
image:asset:_ref: "image-6d2fe8729fb831257b98763b6734668daa27b696-2124x1590-png"
_type: "reference"
Schema for image is :-
{
      name: 'image',
      title: 'Image',
      type: 'image',
    },
Library i used on sanity is:-
"sanity-plugin-media-library": "^2.0.2",
image is previewing on frontend but the alt tag is not working. please help.
import Image from 'next/image';
import imageUrlBuilder from '@sanity/image-url';

import sanity from '../../utils/sanity';
import config from '../../utils/config';

export function urlFor(source) {
  return imageUrlBuilder(sanity).image(source);
}

const SanityImage = ({ src, layout, width, height, alt, ...props }) => (
  <Image
    src={urlFor(src).width(width).height(height).url()}
    width={width}
    height={height}
    layout={layout || 'responsive'}
    alt={alt || config.siteName}
    {...props}
  />
);

export default SanityImage;
You need to resolve the reference in a porjection.
*[_type == "page" && !(_id in path('drafts.**'))][0] {..,
"id": _id, 
"Image": image.asset ->,
...}
Then you can also just query for the alt.text
*[_type == "page" &amp;&amp; !(_id in path('drafts.**'))][0] {.., "id": _id,
"image": image.asset -&gt;,
"alt": image.asset.alt
...}
Thank you so much...
Happy to help. I struggeled with this in the beginning as well. https://hdoro.dev/learn-groq this here helped me quite a lot to understand the more “nested” functionality of groq
Happy to help. I struggeled with this in the beginning as well. https://hdoro.dev/learn-groq this here helped me quite a lot to understand the more “nested” functionality of groq
great thank you

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.

Was this answer helpful?