Unlock seamless workflows and faster delivery with our latest releases- get the details

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

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
sponsors[].image.asset->url
?
May 24, 2023, 7:18 PM
Hi
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>

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
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,
}
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?