DesertCookie
DesertCookie
Explore posts from servers
NNuxt
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
No description
7 replies