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

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?

👋 Maybe something along the lines of

sponsors[].image.asset->url

?

Hi , 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:

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

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

...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!

Thanks so much! That and 's suggestion got it working - appreciate it!

Most welcome, Jennifer 🙂
And I see the intention on the array now that
answered, didn't notice that earlier...