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
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
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

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

                    v-if="landing.bigImage._type === 'image'"
                    class="listings-left-third img-background d-none d-lg-block"
Aug 28, 2023, 10:10 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?

Categorized in