Skip to content
Unlock seamless workflows and faster delivery with our latest releases – get the details
Get help on Slack

Issue with rendering Nuxt Sanity images and confusion about data structure and image URL method.

3 replies
Last updated: Aug 28, 2023
im having an issue with nuxt sanity images, they do not render. i see the data coming in i followed the nuxt clean template , but images just dont show up
in the studio i am also geting a weird asset empty
Aug 28, 2023, 9:38 PM
Here is what that data means and here is how you can show an image.
Aug 28, 2023, 9:41 PM
user M
im aware of the field meanings, im just trying to show the data that i have setup.
but, when i see the data come in, its showing me a proxy object for which it doesnt seem to allow me to load the image.

im using this as the jump off
https://github.com/sanity-io/sanity-template-nuxt-clean/
the expectation is that i could create a new document, have an image there (copy paste from the post starter schema) and then i should be able to display it, in theexact same way the starter template does.

i cant understand why the data comes in differnetly or why the image url method doesnt do anything or sil;ently fails
Aug 28, 2023, 10:04 PM
ok
user M
i figured it out, there is some odd transformation hapopening here.
so when you run this


const { data: landing } = await useSanityQuery(query);

it kicks back a proxy obj in the server side, but when you interpolate in the template, you actually calling the getter data.value. so you just interpolate the data.property.

so once i figured that out it makes more sense now. but i have to admit, its not the most straight forward thing to realize when 1st looking at it.

took some time to wrap my min d around it and chekcign the proto of the return groq query

 <img
                    v-if="landing.bigImage._type === 'image'"
                    :src="$urlFor(landing.bigImage).height(1000).width(2000).url()"
                    alt="main-section03.png"
                    class="listings-left-third img-background d-none d-lg-block"
                />
Aug 28, 2023, 10:10 PM

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.

Get started for freeExplore the demo

Was this answer helpful?