Show document image as thumbnail in list preview using media

Based on your question, it sounds like you're correctly using the preview configuration but the image isn't showing up. Let me help you troubleshoot this common issue.

The most likely problem is that you're referencing the image field directly, but you need to reference the asset within the image field. Here's the fix:

Instead of this:

preview: {
  select: {
    title: 'title',
    media: 'image'  // This might not work
  }
}

Try this:

preview: {
  select: {
    title: 'title',
    media: 'image.asset'  // Reference the asset specifically
  }
}

For image fields in Sanity, the actual image data is stored in a nested asset property, so you need to access it using dot notation as explained in the preview configuration documentation.

If you're working with an array of images and want to show the first one as the thumbnail, you can use array indexing:

preview: {
  select: {
    title: 'title',
    media: 'images.0.asset'  // Gets the first image's asset from an array
  }
}

You can also add a fallback icon in case the image isn't available using the prepare function:

import { ImageIcon } from "@sanity/icons";

preview: {
  select: {
    title: 'title',
    media: 'image.asset'
  },
  prepare({title, media}) {
    return {
      title: title,
      media: media ?? ImageIcon  // Fallback to an icon if no image
    }
  }
}

The folder icon you're seeing is the default fallback when Sanity can't find a valid image reference. Using image.asset instead of just image should resolve this and display your actual thumbnail in the document list. You can see more examples of this pattern in the guide on creating richer array item previews.