🔮 Sanity Create is here. Writing is reinvented. Try now, no developer setup

Easy way to display a Sanity Image asset in Studio preview.

22 replies
Last updated: Nov 12, 2021
Whats the easy way to show a Sanity Image asset -- i keep running into roadblocks.
Nov 12, 2021, 6:48 PM
Do you mean in terms of showing the asset's data or displaying the image?
Nov 12, 2021, 6:49 PM
More specifically, as a preview in the Studio.
Nov 12, 2021, 6:49 PM
I just want to take a "image" which is a reference (Sanity.imageAsset I believe) and show it.
Nov 12, 2021, 6:49 PM
It seems I have to create a client, then use the
@sanity/image-url
to build the url to show the image?
Nov 12, 2021, 6:50 PM
Acutally, I just realized I select the asset url right in the "select" with nested notation.
Nov 12, 2021, 6:52 PM
In what context do you want show it? Would it be within a document or in a separate preview pane? I guess, to put it more simply, what's the ultimate goal of displaying it?
Nov 12, 2021, 6:53 PM
Just a thumbnail preview on the document list.
Nov 12, 2021, 6:53 PM
...
  preview: {
    select: {
      title: 'title',
      mainImage: 'mainImage.asset.url',
    },
    prepare(selection) {
      return {
        title: selection.title,
        media: <img src={`${selection.mainImage}`} />,
      };
    },
  },
...
Nov 12, 2021, 6:54 PM
That actually works -- but I'm not sure how I can get a smaller scaled and cropped version of "mainImage".
Nov 12, 2021, 6:54 PM
Thats in a document schema
Nov 12, 2021, 6:55 PM
Got it. You should just be able to select the field and display it. Like this:
preview: {
    select: {
      title: 'title',
      media: 'mainImage',
    }
}
Nov 12, 2021, 7:01 PM
So in that case
media
seems to be returning just
{ asset: { _type: "reference", _ref: "..." } }
Nov 12, 2021, 7:02 PM
So in that case
media
seems to be returning just
{ asset: { _type: "reference", _ref: "..." } }
Nov 12, 2021, 7:02 PM
What does your mainImage schema look like?
Nov 12, 2021, 7:03 PM
    {
      title: 'Main Image',
      name: 'mainImage',
      type: 'image',
      options: {
        hotspot: true,
      },
    },
Nov 12, 2021, 7:03 PM
So in that case
media
seems to be returning just
{ asset: { _type: "reference", _ref: "..." } }
Nov 12, 2021, 7:02 PM
That should be setting the icon of the item in the document list to the image in that schema. When you say returning, where is it returning?
Nov 12, 2021, 7:05 PM
Oh...
Nov 12, 2021, 7:06 PM
Wow -- that worked out very nicely haha
Nov 12, 2021, 7:07 PM
I was way over thinking that apparently.
Nov 12, 2021, 7:07 PM
I feel like that was magic I never knew about
Nov 12, 2021, 7:07 PM
It happens! If you're not doing any sort of transformations or calculations, etc., it's surprisingly easy to set up the previews.
Nov 12, 2021, 7:07 PM

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.

Was this answer helpful?