Understanding how to get image props in Sanity.io

25 replies
Last updated: May 23, 2022
I’m struggling to understand how to get all the image props available to me. When I pass my data down all I get is an image ref. How do I pass down the URL and Palette? (those are the two I’m most interested in).
May 23, 2022, 2:54 PM
May 23, 2022, 2:55 PM
It’s a bit hard to follow. Thank you though
May 23, 2022, 3:04 PM
On line 29, am I supposed to edit my query there or do I have to make a separate query in my actual component?
May 23, 2022, 3:05 PM
You can edit your query. Right now you query all your data from all your projects, which you might want to refine to avoid querying unnecessary fields and to resolve your references and assets.
*[ _type == "project"] {
  "image": myImageField.asset -> url
May 23, 2022, 3:06 PM
I would prefer all my data though. How would I know the right properties to put for the rest of my data if I’m cherry-picking?
Is there any practical examples in the docs or good videos you know going through this process more thoroughly?
May 23, 2022, 3:13 PM
means all the fields so you can use that, but it seems rather unlikely that you use absolutely every field, including
, and so on. You can always log what data you receive and then update your author to only query the fields you need. You typically know the properties because you get to define your schema—you’re in control.
May 23, 2022, 3:15 PM
Coming back to your original problem though, my code snippet should help you resolve the URL for your image.
When you use an image field (or a file field), your image isn’t stored directly in your document. Instead, a reference to an asset object gets stored. You need to resolve that asset yourself, because it’ not done for you automatically when you query all fields.

This is what the small arrow
means: following the reference to what’s behind, and querying fields from it.
May 23, 2022, 3:19 PM
Okay, I’m follow a bit here.
May 23, 2022, 3:22 PM
Yes your snippet helped me, so thank you for that!
May 23, 2022, 3:22 PM
I am having trouble getting the palette though:
May 23, 2022, 3:22 PM
What is the palette?
May 23, 2022, 3:23 PM
I just tried to mimic the first one. But I guess because palette has more objects inside I have to change it around?
May 23, 2022, 3:23 PM
That’s why I was hoping to access the whole image object, instead of just the URL. I’d love to know how to do it both ways, accessing it all without drilling down to just the url, and how to have it all passed to my component.
May 23, 2022, 3:25 PM
I was learning about the palette from here .
May 23, 2022, 3:25 PM
Oh, try
image.asset -> metadata.palette
May 23, 2022, 3:27 PM
I think you just missed the
May 23, 2022, 3:27 PM
Ah yes, that was it.
May 23, 2022, 3:31 PM
Well that definitely solves my issue, I appreciate the help! I need to get more used to this
May 23, 2022, 3:32 PM
If you don’t want to resolve the references to your images manually, you could use this library: https://www.npmjs.com/package/@sanity/image-url . It brings a slightly higher footprint to your client side code, but it gives you a builder.
May 23, 2022, 3:33 PM
I followed along on some sanity blog post to get my project up and running, and it came with this:
May 23, 2022, 3:37 PM
You’re using the legacy portable text. 🙂
May 23, 2022, 3:38 PM
It definitely created a lot of confusion, I wish I started more from scratch to understand a bit better. But urlFor is in there and the image builder… but I never used it I guess. and I wanted to get the palette that’s why I went down this journey
May 23, 2022, 3:39 PM
Ah.. damn lol. Yeah I’m thinking I might re-do it.
May 23, 2022, 3:39 PM
May 23, 2022, 3:39 PM
Do you know any good videos or courses to follow along building bootstrapping sanity from scratch? or an article? I think I copy and pasted too much from this and clearly it has legacy code.
May 23, 2022, 3:40 PM

Sanity– build remarkable experiences at scale

The Sanity Composable Content Cloud is the 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?