Image preview not showing in Sanity Studio

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.