DesertCookie Posts - Answer Overflow

DesertCookie

Explore posts from servers

•Created by DesertCookie on 5/21/2024 in #❓・help

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.

1 replies

NNuxt

•Created by DesertCookie on 5/10/2024 in #❓・help

Append to UTable header template slot

I want to add a textfield to certain columns of my table to be used as filters. For example, to filter the "title", "invNo", or "address" columns of my table. I have achieved this by creating custom <template #title-header="{column}">... slots. However, this completely removes the NuxtUI components, leaving me having to implement such things as sorting myself. Is there a way to only append to the default NuxtUI UTable slot, leaving the default functionality intact?

2 replies

KPCKevin Powell - Community

•Created by DesertCookie on 9/15/2023 in #front-end

Overflow with flexbox resulting in hacky use of calc

7 replies

Gaming

Programming