Nuxt•7mo ago

NuxtImage/NuxtPicture using low-quality/low-resolution image

I have an Nuxt UI caroussel containing iamges:

<UCarousel v-slot="{item}" :items="costume.images" arrows indicators class="h-96">
    <NuxtPicture :src="item"
                 class="nuxt-image w-full h-96"
                 format="avif,webp"
                 :placeholder="[64, 64, 60, 1]"/>
</UCarousel>

<UCarousel v-slot="{item}" :items="costume.images" arrows indicators class="h-96">
    <NuxtPicture :src="item"
                 class="nuxt-image w-full h-96"
                 format="avif,webp"
                 :placeholder="[64, 64, 60, 1]"/>
</UCarousel>

.nuxt-image {
    :deep(img) {
        width: 100%;
        height: 100%;
    }
}

.nuxt-image {
    :deep(img) {
        width: 100%;
        height: 100%;
    }
}

The images chosen and generated by IPX are of low-resolution with a max-width of 300 pixels. The URL is: .../_ipx/w_1024&f_avif&q_75/images/NAME.webp (original is WebP).
This behavior is the same for NuxtImage and NuxtPicture. Adding height="384" (equals h-96) to the component results in the same behavior. There are no additional settings for Nuxt Image.

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

NuxtImage/NuxtPicture using low-quality/low-resolution image