NuxtN
Nuxt5mo ago
7 replies
rich

NuxtImage not working as expected with Sanity

If I set the provider to sanity in the image config then for usage such as:

<NuxtImg 
    :src="item.image.asset.url" 
    :alt="item.image.alt"
    sizes="100vw tablet-portrait:80vw"
    loading="eager"
    preload
    v-if="item.image?.asset"
/>


it outputs the following, which has incorrect src urls but correct ?w additions to match the screen sizes

<img onerror="this.setAttribute('data-error', 1)" loading="eager" data-nuxt-img="" sizes="(max-width: 768px) 100vw, 80vw" srcset="https://cdn.sanity.io/images/p1gk0fvo/production/.1500x2250.jpg?w=1&amp;auto=format 1w, https://cdn.sanity.io/images/p1gk0fvo/production/.1500x2250.jpg?w=2&amp;auto=format 2w, https://cdn.sanity.io/images/p1gk0fvo/production/.1500x2250.jpg?w=614&amp;auto=format 614w, https://cdn.sanity.io/images/p1gk0fvo/production/.1500x2250.jpg?w=1228&amp;auto=format 1228w" src="https://cdn.sanity.io/images/p1gk0fvo/production/.1500x2250.jpg?w=1228&amp;auto=format" data-v-0b048cca="" data-error="1" style="pointer-events: auto;">


Whereas without a provider I get:

<img onerror="this.setAttribute('data-error', 1)" loading="eager" data-nuxt-img="" sizes="(max-width: 768px) 100vw, 80vw" srcset="https://cdn.sanity.io/images/p1gk0fvo/production/41f18ff81743f8be2206ee97855ef0f26eaf8c9a-1500x2250.jpg 1w, https://cdn.sanity.io/images/p1gk0fvo/production/41f18ff81743f8be2206ee97855ef0f26eaf8c9a-1500x2250.jpg 2w, https://cdn.sanity.io/images/p1gk0fvo/production/41f18ff81743f8be2206ee97855ef0f26eaf8c9a-1500x2250.jpg 614w, https://cdn.sanity.io/images/p1gk0fvo/production/41f18ff81743f8be2206ee97855ef0f26eaf8c9a-1500x2250.jpg 1228w" src="https://cdn.sanity.io/images/p1gk0fvo/production/41f18ff81743f8be2206ee97855ef0f26eaf8c9a-1500x2250.jpg" data-v-0b048cca="">


Correct URLs but no w? attribute.

Any thoughts?
Was this page helpful?