Update img tags to NuxtImg
This commit is contained in:
marzban-dev
@@ -27,7 +27,7 @@ const { isLoading: cartImageIsLoading } = useImage({
|
||||
v-if="!cartImageIsLoading"
|
||||
class="size-[3.5rem] shrink-0 rounded-100 border border-gray-300 overflow-hidden"
|
||||
>
|
||||
<img :src="image" alt="product" class="object-conver" />
|
||||
<NuxtImg :src="image" alt="product" class="object-conver" />
|
||||
</div>
|
||||
<Skeleton
|
||||
v-else
|
||||
|
||||
@@ -121,7 +121,7 @@ watch(
|
||||
v-if="!cartImageIsLoading"
|
||||
class="size-[4rem] lg:size-[12rem] aspect-square shrink-0 rounded-xl border border-slate-200 overflow-hidden"
|
||||
>
|
||||
<img
|
||||
<NuxtImg
|
||||
:src="data.product.image"
|
||||
class="object-cover size-full"
|
||||
alt="product"
|
||||
|
||||
@@ -36,7 +36,7 @@ const remaining = computed(() => items.value.length - max.value);
|
||||
:class="index < 0 ? '' : ''"
|
||||
:style="{ width: size, height: size, zIndex: index + 2 }"
|
||||
>
|
||||
<img
|
||||
<NuxtImg
|
||||
:src="item"
|
||||
alt="avatar"
|
||||
class="rounded-full object-cover w-full h-full"
|
||||
|
||||
@@ -54,7 +54,7 @@ const createdAt = usePersianTimeAgo(new Date(date.value));
|
||||
{{ category.name }}
|
||||
</Tag>
|
||||
|
||||
<img
|
||||
<NuxtImg
|
||||
:src="image"
|
||||
class="group-hover:scale-105 transition-transform duration-200 absolute size-full object-cover z-10"
|
||||
alt=""
|
||||
@@ -104,7 +104,7 @@ const createdAt = usePersianTimeAgo(new Date(date.value));
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<img
|
||||
<NuxtImg
|
||||
v-if="variant === 'lg'"
|
||||
:src="image"
|
||||
class="group-hover:scale-105 transition-transform duration-200 absolute size-full object-cover z-10"
|
||||
|
||||
@@ -25,7 +25,7 @@ const { colorObject } = useImageColor(`#category-image-${id.value}`);
|
||||
<template>
|
||||
<NuxtLink :to="`/products?category=${id}`">
|
||||
<div class="group relative rounded-150 overflow-hidden w-full aspect-square bg-white brightness-[97%]">
|
||||
<img
|
||||
<NuxtImg
|
||||
:id="`category-image-${id}`"
|
||||
class="group-hover:scale-105 transition-transform duration-200 absolute object-contain size-full"
|
||||
:src="picture"
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="bg-black relative overflow-hidden">
|
||||
|
||||
<img src="/img/footer-bg.jpg" alt="" class="absolute z-10 object-cover opacity-45" />
|
||||
<NuxtImg src="/img/footer-bg.jpg" alt="" class="absolute z-10 object-cover opacity-45" />
|
||||
|
||||
<div class="flex flex-col gap-4 items-center justify-center relative z-20">
|
||||
|
||||
|
||||
@@ -55,7 +55,7 @@ onMounted(() => {
|
||||
id="loading-overlay"
|
||||
class="fixed inset-0 size-full z-9999 flex-center bg-black"
|
||||
>
|
||||
<img
|
||||
<NuxtImg
|
||||
id="loading-overlay-image"
|
||||
src="/img/heymlz/heymlz-loading-1.gif"
|
||||
class="opacity-0 scale-70 absolute z-20"
|
||||
|
||||
@@ -40,7 +40,7 @@ const highlights = ref<Highlight[]>([
|
||||
>
|
||||
<template v-for="(highlight, index) in highlights" :key="index">
|
||||
<div class="flex flex-col-center gap-[.75rem] px-5">
|
||||
<img
|
||||
<NuxtImg
|
||||
:src="highlight.icon"
|
||||
class="size-[70px] md:size-[90px]"
|
||||
alt=""
|
||||
|
||||
@@ -54,7 +54,7 @@ const changeSlide = (id: number) => {
|
||||
class="bg-white brightness-[97%] w-full relative aspect-square overflow-hidden rounded-[12px] md:rounded-200"
|
||||
>
|
||||
<Transition name="zoom" mode="out-in">
|
||||
<img
|
||||
<NuxtImg
|
||||
:key="selectedSlideDetail.id"
|
||||
class="size-full absolute object-contain"
|
||||
:src="selectedSlideDetail.image"
|
||||
@@ -84,7 +84,7 @@ const changeSlide = (id: number) => {
|
||||
"
|
||||
class="active:scale-95 hover:border-slate-200 transition-all cursor-pointer brightness-[97%] bg-white aspect-square border-2 rounded-[12px] md:rounded-200 w-full overflow-hidden relative"
|
||||
>
|
||||
<img
|
||||
<NuxtImg
|
||||
class="absolute object-cover size-full"
|
||||
:src="slide.image"
|
||||
:alt="String(slide.id)"
|
||||
|
||||
@@ -36,7 +36,7 @@ const { colorObject } = useImageColor(`#product-image-${id.value}`);
|
||||
<div
|
||||
class="group relative size-full aspect-square rounded-xl @[280px]:rounded-2xl bg-white brightness-[98%] overflow-hidden p-6"
|
||||
>
|
||||
<img
|
||||
<NuxtImg
|
||||
:id="`product-image-${id}`"
|
||||
:src="picture"
|
||||
class="group-hover:scale-105 transition-transform duration-200 size-full object-contain absolute inset-0"
|
||||
|
||||
@@ -20,7 +20,7 @@ const { picture, price, title, color } = toRefs(props);
|
||||
<div class="max-w-[500px] w-full h-[116px] flex items-center justify-between py-2 pe-6 ps-2 bg-white rounded-150">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="relative size-[100px] rounded-100 overflow-hidden border-[0.5px] border-slate-200">
|
||||
<img :src="picture" :alt="title" class="object-cover absolute" />
|
||||
<NuxtImg :src="picture" :alt="title" class="object-cover absolute" />
|
||||
</div>
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<span class="typo-sub-h-md text-black">{{ title }}</span>
|
||||
|
||||
@@ -25,13 +25,13 @@ const onSwiper = (swiper: SwiperClass) => {
|
||||
class="flex flex-col justify-center gap-4 bg-black h-[150svh] relative overflow-hidden"
|
||||
>
|
||||
|
||||
<div class="w-full flex justify-center items-center relative z-10">
|
||||
<span class="text-white typo-h-6 md:typo-h-5 lg:typo-h-4">
|
||||
دسته بندی ها
|
||||
</span>
|
||||
</div>
|
||||
<!-- <div class="w-full flex justify-center items-center relative z-10">-->
|
||||
<!-- <span class="text-white typo-h-6 md:typo-h-5 lg:typo-h-4">-->
|
||||
<!-- دسته بندی ها-->
|
||||
<!-- </span>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<img
|
||||
<NuxtImg
|
||||
src="/img/categories-gradient.png"
|
||||
class="animate-spin [animation-duration:16s] object-cover absolute size-full brightness-45 scale-115 aspect-square"
|
||||
:style="{
|
||||
@@ -41,6 +41,17 @@ const onSwiper = (swiper: SwiperClass) => {
|
||||
/>
|
||||
|
||||
<div class="w-full my-20 relative">
|
||||
<video
|
||||
class="aspect-square w-[450px] translate-[-253px] absolute left-1/2 -translate-x-1/2 z-10"
|
||||
:style="{
|
||||
filter: 'drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.4))',
|
||||
}"
|
||||
src="/video/heymlz/heymlz-seat-2.webm"
|
||||
autoplay
|
||||
playsinline
|
||||
webkit-playsinline
|
||||
muted
|
||||
/>
|
||||
<Swiper
|
||||
:loop="true"
|
||||
:centered-slides="true"
|
||||
@@ -98,7 +109,8 @@ const onSwiper = (swiper: SwiperClass) => {
|
||||
|
||||
<div class="w-full flex justify-center items-center">
|
||||
<NuxtLink to="/category">
|
||||
<Button variant="solid" class="invert rounded-full max-xs:typo-label-sm !px-4 xs:!px-8" end-icon="ci:arrow-left">
|
||||
<Button variant="solid" class="invert rounded-full max-xs:typo-label-sm !px-4 xs:!px-8"
|
||||
end-icon="ci:arrow-left">
|
||||
مشاهده همه دسته ها
|
||||
</Button>
|
||||
</NuxtLink>
|
||||
|
||||
@@ -193,7 +193,7 @@ onUnmounted(() => {
|
||||
/>
|
||||
</template>
|
||||
|
||||
<img
|
||||
<NuxtImg
|
||||
v-else
|
||||
class="absolute inset-0 size-full object-cover"
|
||||
:src="slide.image!"
|
||||
|
||||
@@ -28,7 +28,7 @@ const onSwiper = (swiper: SwiperClass) => {
|
||||
|
||||
<template>
|
||||
<div class="relative max-h-[700px] flex justify-center items-center h-svh w-full">
|
||||
<img
|
||||
<NuxtImg
|
||||
class="absolute size-full object-cover"
|
||||
src="/img/hero-bg.jpg"
|
||||
alt=""
|
||||
|
||||
@@ -59,7 +59,7 @@ watch(
|
||||
class="rounded-200 overflow-hidden h-[70svh] md:h-[80svh] relative"
|
||||
>
|
||||
<Transition name="fade">
|
||||
<img
|
||||
<NuxtImg
|
||||
v-if="activeSlideVideo !== 'right'"
|
||||
:src="homeData!.difreance_section.image1"
|
||||
class="select-none absolute size-full object-cover brightness-[95%]"
|
||||
@@ -77,8 +77,9 @@ watch(
|
||||
</Transition>
|
||||
|
||||
<div class="absolute size-full right-0 w-full">
|
||||
|
||||
<Transition name="fade">
|
||||
<img
|
||||
<NuxtImg
|
||||
v-if="activeSlideVideo !== 'left'"
|
||||
:src="homeData!.difreance_section.image2"
|
||||
class="overlay-image select-none absolute object-cover size-full brightness-[95%]"
|
||||
@@ -94,12 +95,27 @@ watch(
|
||||
class="overlay-image select-none absolute object-cover size-full brightness-[95%]"
|
||||
/>
|
||||
</Transition>
|
||||
|
||||
<video
|
||||
src="/video/heymlz/heymlz-pulling.webm"
|
||||
autoplay
|
||||
muted
|
||||
playsinline
|
||||
webkit-playsinline
|
||||
class="size-[300px] absolute translate-x-[-100px] z-10 top-[32%] -translate-y-1/2"
|
||||
:style="{
|
||||
left: `${clipPathPercent}%`,
|
||||
filter: 'drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.3))'
|
||||
}"
|
||||
/>
|
||||
|
||||
<div
|
||||
:style="{
|
||||
left: `${clipPathPercent}%`,
|
||||
}"
|
||||
left: `${clipPathPercent}%`,
|
||||
}"
|
||||
class="select-none w-2 h-full bg-black absolute left-0 flex items-center justify-center"
|
||||
>
|
||||
|
||||
<div
|
||||
ref="draggableEl"
|
||||
class="cursor-grab hover:scale-115 transition-transform rounded-full absolute bg-black size-11 flex items-center justify-center"
|
||||
|
||||
@@ -93,7 +93,7 @@ onUnmounted(() => {
|
||||
class="showcase-slide origin-bottom absolute size-full bg-transparent flex items-center justify-center"
|
||||
>
|
||||
|
||||
<img
|
||||
<NuxtImg
|
||||
class="w-[280px] xs:w-[350px] lg:w-[500px] xl:w-[650px] z-20 mb-30 sm:mb-20 lg:mb-30"
|
||||
:src="slide.image"
|
||||
:style="{
|
||||
|
||||
@@ -35,7 +35,7 @@ const { selectedVariant } = inject("productVariant") as ProductVariantProvideTyp
|
||||
class="size-[6.25rem] rounded-full border-slate-200 bg-white flex-center"
|
||||
>
|
||||
<div class="size-11 relative">
|
||||
<img
|
||||
<NuxtImg
|
||||
class="size-full absolute object-cover"
|
||||
:src="inPackItem.cover"
|
||||
:alt="inPackItem.item_title"
|
||||
|
||||
@@ -54,7 +54,7 @@ const username = computed(() => {
|
||||
:class="is_user ? 'rounded-br-none' : 'rounded-bl-none'"
|
||||
>
|
||||
<div class="w-2/12 flex items-start justify-start">
|
||||
<img :src="profile" class="size-16 rounded-full" />
|
||||
<NuxtImg :src="profile" class="size-16 rounded-full" />
|
||||
</div>
|
||||
|
||||
<div class="w-10/12 flex flex-col items-start pt-2">
|
||||
|
||||
Reference in New Issue
Block a user