How to get image URL from array of objects in GROQ query?

8 replies

Last updated: May 25, 2023

Kia ora koutou! I'm working on a new project with nextjs and their app folder, which is resulting in some new-to-me syntax! It's also my first time grabbing an image url directly in my GROQ query rather than using the url builder - which I'm finding a whole lot simpler and am enjoying.
My sticking point now is that I have a more complex field (an array of objects including an image) and I'm stuck on the syntax for how to grab the URL like I would using

"image": image.asset->url

.
Here's my structure:

name: _'_sponsors_'_,

title: _'_Sponsor logos_'_,

type: _'_array_'_,

of: [{

type: _'_object_'_,

fields: [

name: _'_alt_'_,

type: _'_string_'_,

title: _'_Name_'_,

},

type: _'_image_'_,

name: _'_image_'_,

},

name: _'_url_'_,

title: _'_Link_'_,

type: _'_url_'_,}

}],

Is there an easy way to grab the image url in my query, or should I stick with the url builder for this case?

AI Update

Kia ora! Great to hear you're enjoying the simpler approach of getting image URLs directly in GROQ! For your array of objects with images, you can absolutely use the same syntax pattern - you just need to use GROQ's array projection syntax with the [] operator.

Here's how to grab the image URLs from your sponsors array:

*[_type == "yourDocumentType"] {
  sponsors[] {
    alt,
    "imageUrl": image.asset->url,
    url
  }
}

The key is using sponsors[] with curly braces to project what you want from each object in the array. The image.asset->url syntax works exactly the same way inside array projections as it does for top-level fields.

If you want to keep all the fields and just add the resolved URL, you can use the ellipsis operator:

*[_type == "yourDocumentType"] {
  sponsors[] {
    ...,
    "imageUrl": image.asset->url
  }
}

This keeps all your existing fields (alt, image, url) and adds the resolved imageUrl field.

Pro tip: Place the ellipsis (...) at the beginning of your projection to avoid accidentally overriding fields. So if you're being extra cautious:

sponsors[] {
  ...,
  "imageUrl": image.asset->url
}

No need to switch back to the URL builder for this case - the direct GROQ approach works perfectly fine for arrays! The syntax is just as clean and straightforward as what you've been enjoying with single images.

Show original thread

8 replies

👋 Maybe something along the lines of

sponsors[].image.asset->url

user S

, and you want to be careful; I have a friend who understands such things!
(a Kiwi who flutters home every other half year - and his alike lady with him
🙂 -- and in fact, I was just reading about the new interest in using Maori in the everyday there. which is great)
I suspect what you're after looks like so:

*[ _type == 'post' ]
{
  _id,
  title,
  "imageUrl": mainImage.asset->url
}

and will get you results like this, as viewed on the Vision plugin's listing:

0:{…} 3 properties
  _id:46c9a52d-74d9-4230-b045-380718591ded
  title:We'll make one to start
  imageUrl:<https://cdn.sanity.io/images/[yourprojid]/production/a43c18f9a28611df1a4895eb09c159563c575883-736x497.jpg>

There are two important keys to this,
• for a detailed path instead of just a field item, we need to define a string label for it, the

"imageUrl":

here• the

asset

field holds a reference, so we need to dereference it with the arrow

->

to access iits own field

There's this and more on the doc page I'll put first at the bottom, along with the 'cheat sheet' which is a good way to find Groq things when you want to know about them, and the queries page to base on....

<https://www.sanity.io/docs/presenting-images#BnS1mFRw>
<https://www.sanity.io/docs/query-cheat-sheet>
<https://www.sanity.io/docs/how-queries-work>

...late, I know, but since I'd written the detail of it 🙂

That's great, thank you both! This might be in the cheat sheet but I'll pop it here too - is it possible to grab "imageUrl": mainImage.asset->url as well as grab the associated link? Can I include the url query as well as an "imageLink": mainImage.url?

Essentially grabbing the specific image url from the object with one part of the query, and grabbing the rest of the object with another?

sure...you just put both items in your 'projection' , as Sanity rather formally names the return definition part of a Groq query. That's the portion with the curly brackets, looking like the object that will be retuned for each record the square-brackets part selects.
Here's a 'clump' of requests all together in one query. Each of them makes sense by the simple ideas above, except the one with the open arrow,

"alsoAll": mainImage.asset->,

This is just a Sanity shorthand for the

spread

version just above,

"alsoAll": mainImage.asset->,

Don't forget any commas, just as with JS objects anywhere, as the error messages aren't very friendly or informative!

*[ _type == 'post' ]
{
  _id,
  title,
  "imageAll": mainImage.asset->{ ... },
  "alsoAll": mainImage.asset->,
  "imageSpecific": mainImage.asset->{
    _type,
    _createdAt,
    url,
  },
  "imageUrl": mainImage.asset->url,
}

Thanks so much! That and

user M

's suggestion got it working - appreciate it!

Most welcome, Jennifer 🙂
And I see the intention on the array now that

user M

answered, didn't notice that earlier...

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for free Explore the demo

How to get image URL from array of objects in GROQ query?

Sanity – Build the way you think, not the way your CMS thinks

Was this answer helpful?