nuxt image fixes

netlify.toml

@@ -3,4 +3,7 @@
   NUXT_IMAGE_DOMAINS = "Comma separated list of domains. example.com,example2.com"
 
 [build]
-  command = "nuxt generate"
+  command = "nuxt generate"
+
+[images]
+  remote_images = ["https://secure.woonuxt.com/.*"]

woonuxt_base/components/CategoryCard.vue

@@ -18,9 +18,7 @@ const ImageHeight = Math.round(imageWidth * 1.25);
       :src="node.image?.sourceUrl || fallbackImage"
       :alt="node.image?.altText || node.name"
       :title="node.image?.title || node.name"
-      loading="lazy"
-      format="avif"
-      fit="outside" />
+      loading="lazy" />
     <div class="absolute inset-x-0 bottom-0 opacity-50 bg-gradient-to-t from-black to-transparent h-1/2" />
     <span class="relative z-10 mt-auto mb-2 text-sm font-semibold text-white capitalize md:text-base md:mb-4" v-html="node.name" />
   </NuxtLink>

woonuxt_base/components/generalElements/HeroBanner.vue

@@ -7,9 +7,7 @@
       src="/images/hero-4.jpg"
       alt="Hero image"
       loading="eager"
-      fit="outside"
       sizes="sm:100vw lg:1400px"
-      format="webp"
       fetchpriority="high"
       preload />
     <div class="container absolute inset-0 flex flex-col items-start justify-center bg-gradient-to-l from-gray-200 md:bg-none p-8">

woonuxt_base/components/productElements/ProductCard.vue

@@ -48,9 +48,7 @@ const imagetoDisplay = computed<string>(() => {
         :alt="node.image?.altText || node.name"
         :title="node.image?.title || node.name"
         :loading="index <= 3 ? 'eager' : 'lazy'"
-        fit="outside"
-        class="skeleton"
-        format="webp" />
+        class="skeleton" />
     </NuxtLink>
     <div class="p-2">
       <StarRating :rating="node.averageRating" :count="node.reviewCount" />

woonuxt_base/components/productElements/ProductImageGallery.vue

@@ -45,26 +45,22 @@ watch(
       :imgAttrs="{ class: 'rounded-xl object-contain w-full min-w-[350px] skeleton' }"
       width="640"
       height="640"
-      fit="outside"
       :alt="imageToShow.altText || node.name"
       :title="imageToShow.title || node.name"
       :src="imageToShow.sourceUrl || fallbackImage"
-      fetchpriority="high"
-      format="webp" />
+      fetchpriority="high" />
     <div v-if="gallery.nodes.length" class="my-4 gallery-images">
       <NuxtImg
         v-for="galleryImg in galleryImages"
         :key="galleryImg.databaseId"
         class="cursor-pointer rounded-xl skeleton"
         width="640"
         height="640"
-        fit="outside"
         :src="galleryImg.sourceUrl"
         :alt="galleryImg.altText || node.name"
         :title="galleryImg.title || node.name"
         @click.native="changeImage(galleryImg)"
-        loading="lazy"
-        format="webp" />
+        loading="lazy" />
     </div>
   </div>
 </template>

woonuxt_base/pages/product/[slug].vue

@@ -83,7 +83,7 @@ const disabledAddToCart = computed(() => {
         :gallery="product.galleryImages!"
         :node="type"
         :activeVariation="activeVariation || {}" />
-      <NuxtImg v-else class="relative flex-1 skeleton" format="webp" src="/images/placeholder.jpg" :alt="product?.name || 'Product'" />
+      <NuxtImg v-else class="relative flex-1 skeleton" src="/images/placeholder.jpg" :alt="product?.name || 'Product'" />
 
       <div class="lg:max-w-md xl:max-w-lg md:py-2 w-full">
         <div class="flex justify-between mb-4">