Can someone point me to the docs where you return a URL for an image?

25 replies
Last updated: Jul 21, 2020
Can someone point me to the docs where you return a url for an image?I keep seeing the url param returned in sample objects - but not seeing it on my end - what am I missing?

For my images: I have an
asset
property - which is where I would assume the
url
would be. However I am only getting a
_ref
and a
type
.
AI Update

You're running into a common point of confusion! When you query image fields in Sanity, you get an asset object with just _ref and _type because that's how Sanity stores references to image assets. The actual url and other properties live in the asset document itself, which you need to either dereference in your GROQ query or build using the @sanity/image-url library.

Two Solutions:

Use the dereference operator -> in GROQ to expand the asset reference and get the URL:

*[_type == "yourDocType"] {
  title,
  image {
    asset-> {
      url
    }
  }
}

Or more concisely:

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

This will give you the direct CDN URL to the image.

For most frontend applications, you'll want to use the @sanity/image-url package instead. This gives you much more control over image transformations (sizing, quality, format, etc.):

pnpm add @sanity/image-url

Then create a helper function:

import imageUrlBuilder from '@sanity/image-url'
import { client } from './client'

const builder = imageUrlBuilder(client)

export function urlFor(source) {
  return builder.image(source)
}

Now you can use it with just the asset reference (no need to dereference in GROQ):

// Your query returns: { image: { asset: { _ref: "...", _type: "reference" } } }

// Build the URL with transformations:
const imageUrl = urlFor(document.image).width(800).url()

The image-url builder is the preferred approach because it lets you apply transformations on-the-fly like width, height, quality, format (WebP, AVIF), and automatically handles Sanity's image CDN parameters.

Why you only see _ref and _type

This is by design in Sanity's architecture. When you upload an image, Sanity creates a separate asset document in the Content Lake and stores a reference to it in your document. The reference access operator -> resolves these references by executing an internal subquery to fetch the linked asset data.

where are you trying to return the URL?
in sanity? gatsby? something else?
user N
Thanks for asking for more context.
Returning the URL in a nextjs frontend using sanity groq query.
mmm, ok, i've not used nextjs but let me see if i can't still help you out
Sweet thanks. I saw there are a few examples of image packages used for gatsby and such - but thats a little overkill for what I am looking for.
Specifically referencing this:

https://www.sanity.io/docs/image-type#example-of-a-image-asset-object-with-metadata-location-lqip-palette-and-dimensions-df3f768ce073
Returns a
url
but no reference on how to do so or where it comes from.
Ooh i think im seeing where - you drop the
metadata
into your
options
call and specify what you want to return. I’ll try this.
Hmm - not that. Url seems to live outside of metadata somewhere!
you've seen this?
you might need to use the
@sanity/image-url
plugin
not 100% sure about that
Yea that was step 2. 🙂
I’ll dig in a bit more after dinner - thanks for the help so far!
image.asset->url
- asset does not return url as a data point: only getting
_ref
and
type
back 🤷‍♂️
*[_type == 'person']{
  name,
  "imageUrl": image.asset->url
}
seems relevant
haha, ok, you saw that
Yup 🙂 im just racking my brains on why its missing - it seems like a standard return based on the docs
i think it would be something like
your-field-name.asset->url
In the interm i could build up the string using interpolation and the
_ref
item 👍
have you tried
mainImage.asset->url
?
is
mainImage
a field or an object?
Yea I tried that - errors out.
user N
I think it was a syntax issue from the docs.
Ended up running
mainImage.asset->{url}
and got what I needed.
Also had to re read the groq docs concerning references 🙂 - huge fan of all the sweet operators you can throw in there to return data.
oh nice, glad its working ... did you drop a note in the feedback channel so the sanity team can update the docs?
I did not - will do that now.

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.

Was this answer helpful?