Skip to content
Get help on Slack

Adding an image thumbnail to a document list item in Sanity.io

7 replies
Last updated: Sep 8, 2020
Hello! I have one document and in the list items, i want to show the image of that document like a thumbnail, i am trying the "preview" with "media" but im getting the default folder icon. I am missing something?
Sep 8, 2020, 11:25 AM
Hey! Could you share the code for the image field and the preview? 🙂
Sep 8, 2020, 11:28 AM
Yes of course, i hope it helps, im missing something 🙂
export default {
    
name: 'publisher',
    
title: 'Publisher',
    
type: 'document',
    
fields: [
        
{
            
name: 'name',
            
title: 'Name',
            
type: 'string'
        
},
        
{
            
title: 'Logo',
            
name: 'logo',
            
type: 'file'
        
}
    
],
    
preview: {
        
select: {
            
title: 'name',
            
media: 'logo.asset.url'
        
}
    
}

};
Sep 8, 2020, 11:29 AM
Also, seems like the image preview on the Logo field itself is not working correctly either, which might cause the issue above even if the preview was set up correctly. Could it be an issue with the file itself perhaps? Have you tried uploading a different image file to compare?
Sep 8, 2020, 11:30 AM
I see - 
logo
is of the 
file
type rather than of the 
image
type. If you change it to 
type: 'image'
that should fix it!
Sep 8, 2020, 11:32 AM
Wow it worked! sorry so dumb question
Sep 8, 2020, 11:33 AM
No such thing! Glad it’s working! 🙂
Sep 8, 2020, 11:33 AM
For anyone comming here, as
user M
say, change type to image and in the preview media: 'logo' or the name of the image you want to show as an image

fields: [
        
{
            
name: 'name',
            
title: 'Name',
            
type: 'string'
        
},
        
{
            
title: 'Logo',
            
name: 'logo',
            
type: 'image' // type image
        
}
    
],
    
preview: {
        
select: {
            
title: 'name',
            
media: 'logo' // the name of the image you want to show
        
}
    
}
Sep 8, 2020, 11:33 AM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?