Troubleshooting returning image URLs in Next.js using Sanity.io

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
.
Jul 20, 2020, 8:56 PM
where are you trying to return the URL?
in sanity? gatsby? something else?
Jul 20, 2020, 9:06 PM
user N
Thanks for asking for more context.
Returning the URL in a nextjs frontend using sanity groq query.
Jul 20, 2020, 9:08 PM
mmm, ok, i've not used nextjs but let me see if i can't still help you out
Jul 20, 2020, 9:08 PM
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.
Jul 20, 2020, 9:10 PM
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.
Jul 20, 2020, 9:11 PM
Hmm - not that. Url seems to live outside of metadata somewhere!
Jul 20, 2020, 9:12 PM
you've seen this?
Jul 20, 2020, 9:13 PM
you might need to use the
@sanity/image-url
plugin
Jul 20, 2020, 9:14 PM
not 100% sure about that
Jul 20, 2020, 9:14 PM
Yea that was step 2. ๐Ÿ™‚
Jul 20, 2020, 9:14 PM
Iโ€™ll dig in a bit more after dinner - thanks for the help so far!
Jul 20, 2020, 9:15 PM
image.asset->url
- asset does not return url as a data point: only getting
_ref
and
type
back ๐Ÿคทโ€โ™‚๏ธ
Jul 20, 2020, 9:15 PM
*[_type == 'person']{
  name,
  "imageUrl": image.asset->url
}
seems relevant
Jul 20, 2020, 9:15 PM
haha, ok, you saw that
Jul 20, 2020, 9:15 PM
Yup ๐Ÿ™‚ im just racking my brains on why its missing - it seems like a standard return based on the docs
Jul 20, 2020, 9:16 PM
i think it would be something like
your-field-name.asset->url
Jul 20, 2020, 9:16 PM
In the interm i could build up the string using interpolation and the
_ref
item ๐Ÿ‘
Jul 20, 2020, 9:20 PM
have you tried
mainImage.asset->url
?
Jul 20, 2020, 9:22 PM
is
mainImage
a field or an object?
Jul 20, 2020, 9:23 PM
Yea I tried that - errors out.
Jul 20, 2020, 9:25 PM
user N
I think it was a syntax issue from the docs.
Ended up running
mainImage.asset->{url}
and got what I needed.
Jul 21, 2020, 3:42 AM
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.
Jul 21, 2020, 1:57 PM
oh nice, glad its working ... did you drop a note in the feedback channel so the sanity team can update the docs?
Jul 21, 2020, 2:42 PM
I did not - will do that now.
Jul 21, 2020, 3:46 PM

Sanityโ€“ build remarkable experiences at scale

The Sanity Composable Content Cloud is the 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?