Syntax for grabbing image URLs in a GROQ query using Next.js and

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?
May 24, 2023, 6:06 AM
πŸ‘‹ Maybe something along the lines of
May 24, 2023, 7:18 PM
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' ]
  "imageUrl": mainImage.asset->url
and will get you results like this, as viewed on the Vision plugin's listing:

0:{…} 3 properties
  title:We'll make one to start
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
hereβ€’ the
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....


May 24, 2023, 7:57 PM
...late, I know, but since I'd written the detail of it πŸ™‚
May 24, 2023, 7:57 PM
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-&gt;url as well as grab the associated link? Can I include the url query as well as an "imageLink": mainImage.url?
May 24, 2023, 8:59 PM
Essentially grabbing the specific image url from the object with one part of the query, and grabbing the rest of the object with another?
May 24, 2023, 9:00 PM 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
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' ]
  "imageAll": mainImage.asset->{ ... },
  "alsoAll": mainImage.asset->,
  "imageSpecific": mainImage.asset->{
  "imageUrl": mainImage.asset->url,
May 24, 2023, 9:16 PM
Thanks so much! That and
user M
's suggestion got it working - appreciate it!
May 25, 2023, 7:26 AM
Most welcome, Jennifer πŸ™‚
And I see the intention on the array now that
user M
answered, didn't notice that earlier...
May 25, 2023, 7:27 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.

Was this answer helpful?