Get help on Discord

GROQ query to get resolved image URL with width and height in latest API

15 replies
Last updated: Sep 27, 2021
Hi, I'm trying to sort out a 
groq
query that would give me a resolved image url, along with the image width and height. I noticed I could get some of what I want with the V1 version of the api like so:

*[_type == 'teamMember' && !(_id in path('drafts.**'))]
{'headshot': {'url': headshot.image.asset->url, 'alt': headshot.alt}, ...}
But that doesn't seem to work with the latest version of the API. Would also still need a way to get the width and height of the image.
AI Update

Your query is almost working correctly! The syntax asset->url does work with the latest API versions - that's the standard way to get image URLs in GROQ. Based on your query and the official documentation on presenting images, here's what you need:

*[_type == 'teamMember' && !(_id in path('drafts.**'))] {
  'headshot': {
    'url': headshot.image.asset->url,
    'alt': headshot.alt,
    'width': headshot.image.asset->metadata.dimensions.width,
    'height': headshot.image.asset->metadata.dimensions.height
  }
}

The key is accessing the dimensions through asset->metadata.dimensions - this metadata is automatically extracted when images are uploaded and includes width, height, and aspect ratio.

Important notes about your original query:

  1. The asset->url syntax does work in current API versions - it's the standard approach shown in Sanity's documentation
  2. The metadata.dimensions fields (width, height, aspectRatio) are always included automatically and can't be disabled
  3. If you need the image format/extension, you can add: 'format': headshot.image.asset->extension

Here's a complete example with format included:

*[_type == 'teamMember' && !(_id in path('drafts.**'))] {
  'headshot': {
    'url': headshot.image.asset->url,
    'alt': headshot.alt,
    'width': headshot.image.asset->metadata.dimensions.width,
    'height': headshot.image.asset->metadata.dimensions.height,
    'aspectRatio': headshot.image.asset->metadata.dimensions.aspectRatio,
    'format': headshot.image.asset->extension
  }
}

This approach from the community answer I found shows exactly this pattern working. The image asset documents contain all this metadata by default, so you can query it directly without any special configuration.

If your original V1 query stopped working, it might be due to a different issue (like a schema change or dataset configuration), but the asset->url syntax itself is definitely supported in current API versions!

Show original thread
15 replies
That should work. Btw, the image width and height is part of its 
_ref
/ 
_id
 
// "image-3ff0bac8a44b902c4ba9548ba0a18ac215f14857-2880x1920-png"
const [assetType, _id, dimensions, filetype] = headshot.image.asset._ref.split('-')
const [width, height] = dimensions.split('x')

What do you get when you query?
That should work. Btw, the image width and height is part of its 
_ref
/ 
_id
 
// "image-3ff0bac8a44b902c4ba9548ba0a18ac215f14857-2880x1920-png"
const [assetType, _id, dimensions, filetype] = headshot.image.asset._ref.split('-')
const [width, height] = dimensions.split('x')

At the moment, I'm just playing around in the "Vision" gui, and this is what is returned from the query I posted above:
At the moment, I'm just playing around in the "Vision" gui, and this is what is returned from the query I posted above:
"headshot":{3 items
"_type":"imageWithAlt"
"alt":"headshot"
"image":{2 items
"_type":"image"
"asset":{2 items
"_ref":"image-947080633821852c01e1ad03e1afd8b4435c34df-674x606-png"
"_type":"reference"
}
}
}
That's using v2021-03-25 👆
That's using v2021-03-25
When I switch to v1, I see 👇
"headshot":{2 items
"alt":"headshot"
"url":"<https://cdn.sanity.io/images/abc123/production/947080633821852c01e1ad03e1afd8b4435c34df-674x606.png>"
}
Ah, this is subtle, but it’s because the 
…
started overwriting the fields in 
v2021-03-25
so if you change your query to:
*[_type == 'teamMember' && !(_id in path('drafts.**'))]
{..., 'headshot': {'url': headshot.image.asset->url, 'alt': headshot.alt}}
It should probably work
Because you’re overwriting a key with this projection
*[_type == 'teamMember' && !(_id in path('drafts.**'))]
{..., headshot{'url': headshot.image.asset->url, 'alt': headshot.alt}}

☝️ This is the same btw
Thanks! Trying this out...
Cool, this is working. Thanks!

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 freeExplore the demo

Was this answer helpful?