Get help on Discord

Image preview not showing in Sanity Studio

18 replies
Last updated: Mar 23, 2022
Hey, I'm having trouble getting a preview of the image to show up in sanity. I searched this Slack and found similar problems, but still couldn't get it to work.
AI Update

I can see you're having trouble getting image previews to show up in Sanity Studio. This is a common issue that usually comes down to how the preview is configured in your schema. Let me help you understand how to properly set up image previews.

Understanding Image Previews in Sanity

When you define an image field in your schema, the preview should work automatically in most cases. However, if you want to customize how images appear in lists, references, or array items, you need to use the preview configuration with select and prepare functions.

Basic Image Preview Setup

For a simple document with an image field, here's the basic structure:

defineType({
  name: 'post',
  type: 'document',
  fields: [
    defineField({
      name: 'title',
      type: 'string',
    }),
    defineField({
      name: 'mainImage',
      type: 'image',
      options: {
        hotspot: true
      }
    })
  ],
  preview: {
    select: {
      title: 'title',
      media: 'mainImage'
    }
  }
})

The key here is the preview configuration at the document level - notice how media: 'mainImage' references your image field name.

Common Issues and Solutions

1. Preview Not Showing in Document Lists

If images aren't appearing in your document list view, make sure you have:

  • A preview object defined on your document type
  • A media property in the select object that points to your image field

2. Preview Not Showing for Array Items

For array items (like image galleries), you need to define the preview on the object type itself:

defineType({
  name: 'gallery',
  type: 'object',
  fields: [
    defineField({
      name: 'image',
      type: 'image',
    }),
    defineField({
      name: 'caption',
      type: 'string',
    })
  ],
  preview: {
    select: {
      title: 'caption',
      media: 'image'
    }
  }
})

3. Accessing Images from References

If you're trying to show an image from a referenced document, use dot notation:

preview: {
  select: {
    title: 'title',
    media: 'author.image'  // Access image from referenced author
  }
}

4. Using Fallback Icons

If an image might not always be available, provide a fallback icon as shown in the Sanity documentation:

import { ImageIcon } from '@sanity/icons'

export default defineType({
  name: 'post',
  type: 'document',
  fields: [...],
  preview: {
    select: {
      title: 'title',
      media: 'mainImage'
    },
    prepare({ title, media }) {
      return {
        title,
        media: media || ImageIcon  // Fallback to icon if no image
      }
    }
  }
})

Troubleshooting Checklist

  1. Check field names match: The string in media: 'fieldName' must exactly match your image field's name property
  2. Verify the image field type: Make sure the field is actually type: 'image' (not type: 'file')
  3. Check for uploaded images: Ensure you've actually uploaded an image to the document
  4. Look for schema errors: Check your Studio console for any schema validation errors
  5. Try refreshing: Sometimes Studio needs a hard refresh (Cmd/Ctrl + Shift + R) after schema changes

Example: Complete Working Setup

Here's a complete example that should work:

import { defineType, defineField } from 'sanity'

export default defineType({
  name: 'blogPost',
  type: 'document',
  title: 'Blog Post',
  fields: [
    defineField({
      name: 'title',
      type: 'string',
      title: 'Title'
    }),
    defineField({
      name: 'coverImage',
      type: 'image',
      title: 'Cover Image',
      options: {
        hotspot: true
      },
      fields: [
        {
          name: 'alt',
          type: 'string',
          title: 'Alternative text'
        }
      ]
    })
  ],
  preview: {
    select: {
      title: 'title',
      media: 'coverImage'
    }
  }
})

If you're still experiencing issues after checking these points, it would help to see your actual schema code. The problem is usually a mismatch between the field name and what's referenced in the preview configuration, or the preview configuration being missing entirely from your document type definition.

Show original thread
18 replies
export default {
  name: "imageGallery",
  type: "object",
  title: "Image Gallery",
  fields: [
    {
      name: "section",
      type: "string",
      title: "Section",
      description: "Used for labeling and internal reference ",
    },
    {
      name: "images",
      type: "array",
      title: "Images",

      of: [
        {
          name: "image",
          type: "image",
          title: "Image",
          options: {
            hotspot: true,
          },

          fields: [
            {
              name: "alt",
              type: "localeString",
              title: "Alternative text",
            },
            {
              name: "mobileImage",
              type: "image",
              title: "Mobile Image",
              options: {
                hotspot: true,
              },
            },
          ],
        },
      ],
      preview: {
        select: {
          media: 'images', 
          title: 'alt'
        }
      },
      prepare({ media, title ="something" }) {
        return {
          media,
          title
        };
      },
    },
  ],
};

You’re currently getting the array of images, you need to select one to show, eg. to show the first one:

preview: {
  select: {
    media: 'images.0',
    title: 'alt'
  }
},
Hey, thanks for the reply. Yeah, I tried that, but it still doesn't show up. Here's what I see
user F
Have you tried 
image
?
I can't tell, but if "pink3.jpeg" is truly your alt text, then that means the preview that's pulling data in from the correct level.
yeah, I've tried image and also tried changing the level where my preview is too, but I haven't been able to get it to work
Is the alt text field correct or no?
you're correct, that's the file name, not the alt
so it's not pulling in the alt either
Gotcha. Try this: Extract that `images`field into its own schema object and referencing its type here. The preview should then work.
I haven't been able to get nested previews to work on my side FWIW so this has been my work around. Curious if the Sanity team has a workaround or if this is a bug!
prepare
needs to be inside 
preview
user J
That helped me get the alt text to come in, but the image still doesn't show.I've tried 
images
images.0
image
and 
image.0
export default {
  name: "imageGallery",
  type: "object",
  title: "Image Gallery",
  fields: [
    {
      name: "section",
      type: "string",
      title: "Section",
      description: "Used for labeling and internal reference ",
    },
    {
      name: "images",
      type: "array",
      title: "Images",

      of: [
        {
          name: "image",
          type: "image",
          title: "Image",
          options: {
            hotspot: true,
          },

          fields: [
            {
              name: "alt",
              type: "localeString",
              title: "Alternative text",
            },
            {
              name: "mobileImage",
              type: "image",
              title: "Mobile Image",
              options: {
                hotspot: true,
              },
            },
          ],
          preview: {
            select: {
              media: 'images.0', 
              title: 'alt.en'
            },
            prepare({ media, title ="something" }) {
              return {
                media,
                title
              };
            },
          },
        },
      ],
     
      
    },
  ],
};

Thanks
user M
I did try that, but still didn't work
Got it. If it's in an image object, you need to select the asset:
{
              name: 'image',
              type: 'image',
              title: 'Image',
              options: {
                hotspot: true,
              },
              preview: {
                select: {
                  media: 'asset',
                  title: 'alt.en',
                },
                prepare({ media, title = 'something' }) {
                  return {
                    media,
                    title,
                  };
                },
              },
Got it. If it's in an image object, you need to select the asset:
{
              name: 'image',
              type: 'image',
              title: 'Image',
              options: {
                hotspot: true,
              },
              preview: {
                select: {
                  media: 'asset',
                  title: 'alt.en',
                },
                prepare({ media, title = 'something' }) {
                  return {
                    media,
                    title,
                  };
                },
              },
amazing!! That did the trick
Thanks so much!!
You're welcome!

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.

Get started for freeExplore the demo

Was this answer helpful?