feat: img lazy loading

hitokoto-osc · Sep 22, 2023 · 0b9d646 · 0b9d646
1 parent ec6fe2c
commit 0b9d646
Show file tree

Hide file tree

Showing 10 changed files with 351 additions and 233 deletions.
diff --git a/components/layout/header/Content.vue b/components/layout/header/Content.vue
@@ -9,7 +9,13 @@ const userStore = useUserStore()
   />
   <div class="header">
     <div class="logo-container" @click="navigateTo('/')">
-      <img src="~assets/img/logo.svg" draggable="false" class="logo" />
+      <NuxtImg
+        src="/img/logo.svg"
+        draggable="false"
+        class="logo"
+        loading="lazy"
+        preload
+      />
       <span class="name"> 审核员中心 </span>
     </div>
     <div class="menu">

diff --git a/components/layout/header/account/AccountInfo.vue b/components/layout/header/account/AccountInfo.vue
@@ -9,10 +9,12 @@ const userStore = useUserStore()
   <div class="account" :class="props.class">
     <span class="username"> {{ userStore.user?.name }} </span>
     <div class="avatar-wrapper">
-      <img
+      <NuxtImg
         :src="getAvatarURL(userStore.user?.email || '')"
         draggable="false"
         class="avatar"
+        loading="lazy"
+        placeholder
       />
     </div>
   </div>

diff --git a/components/mobile/MenuDrawer.vue b/components/mobile/MenuDrawer.vue
@@ -19,9 +19,11 @@ const userStore = useUserStore()
     >
       <div class="drawer-container">
         <div class="account-container">
-          <img
+          <NuxtImg
             :src="getAvatarURL(userStore.user?.email || '')"
             draggable="false"
+            loading="lazy"
+            placeholder
             class="avatar"
           />
           <div class="main">

diff --git a/components/poll/Comments.vue b/components/poll/Comments.vue
@@ -40,9 +40,11 @@ const render = (record: PollDetailRes['records'][0]): string => {
       <template v-for="record in records" :key="record.user.id">
         <div class="comment">
           <div class="avatar">
-            <img
+            <NuxtImg
               :src="getAvatarURLByHash(record.user.email_hash)"
               :draggable="false"
+              loading="lazy"
+              placeholder
             />
           </div>
           <div class=":uno: flex-1 flex flex-col justify-center">

diff --git a/layouts/auth.vue b/layouts/auth.vue
@@ -40,10 +40,12 @@ watchEffect(() => {
               'logo-bg': !background
             }"
           ></div>
-          <img
-            src="~assets/img/logo.svg"
+          <NuxtImg
+            src="/img/logo.svg"
             draggable="false"
             class="logo w-18 h-18"
+            preload
+            loading="lazy"
           />
         </div>
 

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -38,6 +38,7 @@ export default defineNuxtConfig({
     '~/assets/scss/main.scss'
   ],
   modules: [
+    '@nuxt/image',
     '@unocss/nuxt',
     // Doc: https://color-mode.nuxtjs.org/
     '@nuxtjs/color-mode',

diff --git a/package.json b/package.json
@@ -99,6 +99,7 @@
     "xss": "^1.0.14"
   },
   "dependencies": {
+    "@nuxt/image": "1.0.0-rc.2",
     "@types/lodash-es": "^4.17.9",
     "lodash-es": "^4.17.21"
   }

diff --git a/pages/dashboard/apply_reviewer.vue b/pages/dashboard/apply_reviewer.vue
@@ -70,8 +70,14 @@ const apply = async () => {
         href="https://cdn.a632079.me/assets/images/202309040813220.png"
         target="_blank"
       >
-        <img src="https://cdn.a632079.me/assets/images/202309040813220.png"
-      /></a>
+        <NuxtImg
+          src="https://cdn.a632079.me/assets/images/202309040813220.png"
+          draggable="false"
+          class="w-full md:w-90% mx-auto block"
+          loading="lazy"
+          placeholder
+        />
+      </a>
       <p>
         审核员模块
         <a