✨Discover storytelling in the AI age with Pixar's Matthew Luhn at Sanity Connect, May 8th—register now

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.

Was this answer helpful?