chore: 图片优化

components/Carousel.vue

@@ -22,7 +22,7 @@ onMounted(() => {
       class="[&>.a-views-wrapper]:h-full"
     >
       <AView v-for="(item, i) in carousels" :key="i" :value="i" h-full>
-        <img :src="item.img" style="object-fit: cover;height:100%;width: 100%;">
+        <NuxtImg :src="item.img" fit="cover" class="w-full" height="600" width="1000"/>
       </AView>
     </AViews>
 

components/ImageHover.vue

@@ -11,7 +11,7 @@ $defineProps<{
     :href="href"
     class="group relative h-full w-full overflow-hidden rounded-lg bg-primary bg-opacity-35 shadow-lg"
   >
-    <img :src="img" class="h-full w-full" style="object-fit: cover;">
+    <NuxtImg loading="lazy" :src="img" class="h-full w-full" fit="cover" width="300" height="180" />
     <div class="mask-img h-50px bg-dark-700/70 transition-all group-hover:(h-full)">
       <div class="text-h6 flex-grow">
         <p :title="$t(topic)" class="line-clamp-1 w-full text-white group-hover:(line-clamp-3 h-full)">

components/section/Banner.vue

@@ -28,7 +28,9 @@ function getMask() {
   <Section
     relative h-380px md:h-400px xl:h-450px
   >
-    <div absolute left-0 top-0 z-0 h-full w-full bg-cover bg-center bg-no-repeat :style="`background-image: url('${img}');-webkit-mask-image:${getMask()}`" />
+    <div absolute left-0 top-0 z-0 h-full w-full bg-cover bg-center bg-no-repeat  :style="`-webkit-mask-image:${getMask()}`" >
+      <NuxtImg :src="img" loading="lazy" width="1000" height="300" class="w-full h-full"/>
+    </div>
     <Section absolute left-0 top-0 h-full w-full flex flex-col items-center justify-center text-shadow>
       <Typography :title="title" :topic="topic" :description="description" :link="link" />
     </Section>

config/pages/home/use-section-six.ts

@@ -11,7 +11,7 @@ export function useSectionSix() {
           name: 'home.sectionSix.content.link[0]',
           href: '#',
         },
-        img: '/imgs/Home-Solutions&Services/DigitalTwin.gif',
+        img: '/imgs/Home-Solutions&Services/DigitalTwin.jpg',
       },
       {
         title: 'home.sectionSix.content.title[1]',
@@ -21,7 +21,7 @@ export function useSectionSix() {
           name: 'home.sectionSix.content.link[1]',
           href: '#',
         },
-        img: '/imgs/Home-Solutions&Services/Circulus.gif',
+        img: '/imgs/Home-Solutions&Services/Circulus.jpg',
       },
       {
         title: 'home.sectionSix.content.title[2]',
@@ -31,7 +31,7 @@ export function useSectionSix() {
           name: 'home.sectionSix.content.link[2]',
           href: '#',
         },
-        img: '/imgs/Home-Solutions&Services/CyberPink.gif',
+        img: '/imgs/Home-Solutions&Services/CyberPink.jpg',
       },
       {
         title: 'home.sectionSix.content.title[3]',
@@ -41,7 +41,7 @@ export function useSectionSix() {
           name: 'home.sectionSix.content.link[3]',
           href: '#',
         },
-        img: '/imgs/Home-Solutions&Services/AIGC.gif',
+        img: '/imgs/Home-Solutions&Services/AIGC.jpg',
       },
 
     ],

nuxt.config.ts

@@ -5,6 +5,7 @@ import { hex2hsl } from './utils/colors'
 
 export default defineNuxtConfig({
   // ssr:false,
+  
   modules: [
     '@vueuse/nuxt',
     '@anu-vue/nuxt',
@@ -16,12 +17,16 @@ export default defineNuxtConfig({
     '@nuxt/content',
     '@nuxtjs/color-mode',
     '@vite-pwa/nuxt',
-    '@aceforth/nuxt-optimized-images',
+    // '@aceforth/nuxt-optimized-images',
+    '@nuxt/image-edge',
     '@nuxt/devtools',
   ],
-  optimizedImages: {
-    optimizeImages: true
+  image:{
+    
   },
+  // optimizedImages: {
+  //   optimizeImages: true
+  // },
   experimental: {
     // when using generate, payload js assets included in sw precache manifest
     // but missing on offline, disabling extraction it until fixed

package.json

@@ -13,7 +13,6 @@
     "start:generate": "npx serve .output/public"
   },
   "dependencies": {
-    "@aceforth/nuxt-optimized-images": "^1.4.0",
     "@anu-vue/nuxt": "^0.13.1",
     "@jiaminghi/color": "^1.1.3",
     "lingo3d-vue": "1.0.118",
@@ -29,6 +28,7 @@
     "@iconify-json/twemoji": "^1.1.11",
     "@nuxt/content": "^2.6.0",
     "@nuxt/devtools": "^0.4.0",
+    "@nuxt/image-edge": "^1.0.0-28089462.3520a62",
     "@nuxtjs/color-mode": "^3.2.0",
     "@nuxtjs/i18n": "8.0.0-beta.11",
     "@nuxtjs/strapi": "^1.9.1",

pages/index.vue

@@ -42,14 +42,14 @@ const sectionNine = useSectionNine()
         <a
           v-for="(img, j) in item.imgs"
           :key="j"
-          class="h-25 w-full flex justify-center"
+          class="h-200px w-full flex justify-center"
           :class="[`animated-delay-${j * 100}ms`, {
             'animated animated-fade-in-up animated-faster': sectionTwoVis,
           }]"
           :href="img.href"
           :title="$t(img.title)"
         >
-          <img :src="img.img">
+          <NuxtImg :src="img.img" height="200" fit="cover" loading="lazy"/>
         </a>
       </div>
     </div>
@@ -134,7 +134,7 @@ const sectionNine = useSectionNine()
     <div v-for="(item, i) in sectionSix.content" :key="i" class="flex flex-wrap gap-6 py-10 md:flex-nowrap" :class="{ 'flex-row-reverse': i % 2 === 0 }">
       <div class="w-45% flex-grow">
         <div class="relative h-full w-full flex items-center justify-center overflow-hidden border-6px border-dark-50/10 rounded-xl dark:border-light-50/10" style="mask-image:linear-gradient(0deg, transparent, #000);-webkit-mask-image:linear-gradient(0deg, transparent, #000 60%);">
-          <img :src="item.img">
+          <NuxtImg quality="20" :src="item.img" fit="cover" height="300" width="600" loading="lazy"/>
         </div>
       </div>
 

public/imgs/Home-Solutions&Services/Circulus.gif

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:add90dac4fd4dcfaa39d8d16107da2dfa9368059561d30d9a88e06a8d368505b
-size 112667349
+oid sha256:8a669d196d9f24f8c776c1512a1ae6230e8d42921a37621be3c4effe6d28d625
+size 87935736

public/imgs/Home-Solutions&Services/CyberPink.gif

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:dc1a967e3c3db43050f6fe715285144f721e48b822a36ba638223dc6be71405b
-size 177550690
+oid sha256:f5415e4382cb47b13913188e3f94ad545da6c32f18ba04fa7eeeacc455e9c9ce
+size 134645621

tsconfig.json

@@ -2,6 +2,6 @@
   "extends": "./.nuxt/tsconfig.json",
   "compilerOptions": {
     "strict": true,
-    "types": ["anu-vue/volar"]
+    "types": ["anu-vue/volar","@nuxt/types", "@nuxt/image"]
   }
 }