fix: 前端修改：图片loading做一个适配，现在图片没加载出来会出现如下情况， 不丝滑

frontend_nuxt/components/AchievementList.vue

@@ -9,7 +9,7 @@
       ]"
       @click="selectMedal(medal)"
     >
-      <img
+      <BaseImage
         :src="medal.icon"
         :alt="medal.title"
         :class="['achievements-list-item-icon', { not_completed: !medal.completed }]"

frontend_nuxt/components/ActivityPopup.vue

@@ -1,7 +1,7 @@
 <template>
   <BasePopup :visible="visible" @close="close">
     <div class="activity-popup">
-      <img v-if="icon" :src="icon" class="activity-popup-icon" alt="activity icon" />
+      <BaseImage v-if="icon" :src="icon" class="activity-popup-icon" alt="activity icon" />
       <div class="activity-popup-text">{{ text }}</div>
       <div class="activity-popup-actions">
         <div class="activity-popup-button" @click="gotoActivity">立即前往</div>

frontend_nuxt/components/ArticleCategory.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="article-category-container" v-if="category">
     <div class="article-info-item" @click="gotoCategory">
-      <img
+      <BaseImage
         v-if="category.smallIcon"
         class="article-info-item-img"
         :src="category.smallIcon"

frontend_nuxt/components/ArticleTags.vue

@@ -6,7 +6,7 @@
       :key="tag.id || tag.name"
       @click="gotoTag(tag)"
     >
-      <img
+      <BaseImage
         v-if="tag.smallIcon"
         class="article-info-item-img"
         :src="tag.smallIcon"

frontend_nuxt/components/AvatarCropper.vue

@@ -2,7 +2,7 @@
   <div v-if="show" class="cropper-modal">
     <div class="cropper-body">
       <div class="cropper-wrapper">
-        <img ref="image" :src="src" alt="to crop" />
+        <BaseImage ref="image" :src="src" alt="to crop" />
       </div>
       <div class="cropper-actions">
         <button class="cropper-btn" @click="$emit('close')">取消</button>

frontend_nuxt/components/BaseImage.vue

@@ -1,13 +1,14 @@
 <template>
   <NuxtImg
-    v-bind="attrs"
+    v-bind="passAttrs"
     :src="src"
     :alt="alt"
     loading="lazy"
     :placeholder="placeholder"
     placeholder-class="base-image-ph"
     @load="onLoad"
-    :class="['base-image', attrs.class, { 'is-loaded': loaded }]"
+    @error="onError"
+    :class="['base-image', passAttrs.class, { 'is-loaded': loaded }]"
   />
 </template>
 
@@ -21,25 +22,46 @@ const props = defineProps({
 })
 
 const attrs = useAttrs()
+
+const passAttrs = computed(() => {
+  const { placeholder, ...rest } = attrs
+  return rest
+})
+
 const loaded = ref(false)
 const img = useImage()
-const placeholder = computed(() => img(props.src, { w: 16, h: 16, f: 'webp', q: 40, blur: 2 }))
+
+const placeholder = computed(() => {
+  if (!props.src) return undefined
+  return img(props.src, { w: 16, h: 16, f: 'webp', q: 20, blur: 1 })
+})
 
 function onLoad() {
   loaded.value = true
 }
+function onError() {
+  loaded.value = true
+}
 </script>
 
 <style scoped>
 .base-image {
-  opacity: 0;
-  transition: opacity 0.25s;
+  display: block;
+  transition:
+    filter 0.35s ease,
+    transform 0.35s ease,
+    opacity 0.35s ease;
+  opacity: 0.92;
 }
+
+.base-image-ph {
+  filter: blur(10px) saturate(0.85);
+  transform: scale(1.02);
+}
+
 .base-image.is-loaded {
+  filter: none;
+  transform: none;
   opacity: 1;
 }
-:deep(img.base-image-ph) {
-  filter: blur(10px);
-  transform: scale(1.03);
-}
 </style>

frontend_nuxt/components/BaseTimeline.vue

@@ -6,9 +6,9 @@
         :class="{ clickable: !!item.iconClick }"
         @click="item.iconClick && item.iconClick()"
       >
-        <img v-if="item.src" :src="item.src" class="timeline-img" alt="timeline item" />
+        <BaseImage v-if="item.src" :src="item.src" class="timeline-img" alt="timeline item" />
         <i v-else-if="item.icon" :class="item.icon"></i>
-        <img v-else-if="item.emoji" :src="item.emoji" class="timeline-emoji" alt="emoji" />
+        <BaseImage v-else-if="item.emoji" :src="item.emoji" class="timeline-emoji" alt="emoji" />
       </div>
       <div class="timeline-content">
         <slot name="item" :item="item">{{ item.content }}</slot>

frontend_nuxt/components/CategorySelect.vue

@@ -9,7 +9,7 @@
       <div class="option-container">
         <div class="option-main">
           <template v-if="option.icon">
-            <img
+            <BaseImage
               v-if="isImageIcon(option.icon)"
               :src="option.icon"
               class="option-icon"

frontend_nuxt/components/CommentItem.vue

@@ -8,7 +8,7 @@
   >
     <!-- <div class="user-avatar-container">
       <div class="user-avatar-item">
-        <img class="user-avatar-item-img" :src="comment.avatar" alt="avatar" />
+        <BaseImage class="user-avatar-item-img" :src="comment.avatar" alt="avatar" />
       </div>
     </div>   -->
     <div class="info-content">

frontend_nuxt/components/Dropdown.vue

@@ -13,7 +13,7 @@
             <template v-for="(label, idx) in selectedLabels" :key="label.id">
               <div class="selected-label">
                 <template v-if="label.icon">
-                  <img
+                  <BaseImage
                     v-if="isImageIcon(label.icon)"
                     :src="label.icon"
                     class="option-icon"
@@ -32,7 +32,7 @@
           <span v-if="selectedLabels.length">
             <div class="selected-label">
               <template v-if="selectedLabels[0].icon">
-                <img
+                <BaseImage
                   v-if="isImageIcon(selectedLabels[0].icon)"
                   :src="selectedLabels[0].icon"
                   class="option-icon"
@@ -69,7 +69,12 @@
         >
           <slot name="option" :option="o" :isSelected="isSelected(o.id)">
             <template v-if="o.icon">
-              <img v-if="isImageIcon(o.icon)" :src="o.icon" class="option-icon" :alt="o.name" />
+              <BaseImage
+                v-if="isImageIcon(o.icon)"
+                :src="o.icon"
+                class="option-icon"
+                :alt="o.name"
+              />
               <i v-else :class="['option-icon', o.icon]"></i>
             </template>
             <span>{{ o.name }}</span>
@@ -100,7 +105,12 @@
             >
               <slot name="option" :option="o" :isSelected="isSelected(o.id)">
                 <template v-if="o.icon">
-                  <img v-if="isImageIcon(o.icon)" :src="o.icon" class="option-icon" :alt="o.name" />
+                  <BaseImage
+                    v-if="isImageIcon(o.icon)"
+                    :src="o.icon"
+                    class="option-icon"
+                    :alt="o.name"
+                  />
                   <i v-else :class="['option-icon', o.icon]"></i>
                 </template>
                 <span>{{ o.name }}</span>

frontend_nuxt/components/HeaderComponent.vue

@@ -12,7 +12,7 @@
           ></span>
         </div>
         <NuxtLink class="logo-container" :to="`/`" @click="refrechData">
-          <img
+          <BaseImage
             alt="OpenIsle"
             src="https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/image.png"
             width="60"
@@ -63,7 +63,7 @@
           <DropdownMenu v-if="isLogin" ref="userMenu" :items="headerMenuItems">
             <template #trigger>
               <div class="avatar-container">
-                <img class="avatar-img" :src="avatar" alt="avatar" />
+                <BaseImage class="avatar-img" :src="avatar" alt="avatar" />
                 <i class="fas fa-caret-down dropdown-icon"></i>
               </div>
             </template>
@@ -75,7 +75,6 @@
           </div>
         </div>
       </ClientOnly>
-
       <SearchDropdown ref="searchDropdown" v-if="isMobile && showSearch" @close="closeSearch" />
     </div>
   </header>
@@ -149,13 +148,14 @@ const copyInviteLink = async () => {
     if (res.ok) {
       const data = await res.json()
       const inviteLink = data.token ? `${WEBSITE_BASE_URL}/signup?invite_token=${data.token}` : ''
-      /** 
+      /**
        * navigator.clipboard在webkit中有点奇怪的行为
        * https://stackoverflow.com/questions/62327358/javascript-clipboard-api-safari-ios-notallowederror-message
        * https://webkit.org/blog/10247/new-webkit-features-in-safari-13-1/
-      */
+       */
       setTimeout(() => {
-        navigator.clipboard.writeText(inviteLink)
+        navigator.clipboard
+          .writeText(inviteLink)
           .then(() => {
             toast.success('邀请链接已复制')
           })

frontend_nuxt/components/MedalPopup.vue

@@ -4,7 +4,7 @@
       <div class="medal-popup-title">恭喜你获得以下勋章</div>
       <div class="medal-popup-list">
         <div v-for="medal in medals" :key="medal.type" class="medal-popup-item">
-          <img :src="medal.icon" :alt="medal.title" class="medal-popup-item-icon" />
+          <BaseImage :src="medal.icon" :alt="medal.title" class="medal-popup-item-icon" />
           <div class="medal-popup-item-title">{{ medal.title }}</div>
         </div>
       </div>

frontend_nuxt/components/MenuComponent.vue

@@ -88,7 +88,7 @@
               @click="gotoCategory(c)"
             >
               <template v-if="c.smallIcon || c.icon">
-                <img
+                <BaseImage
                   v-if="isImageIcon(c.smallIcon || c.icon)"
                   :src="c.smallIcon || c.icon"
                   class="section-item-icon"
@@ -114,7 +114,7 @@
               <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
             </div>
             <div v-else v-for="t in tagData" :key="t.id" class="section-item" @click="gotoTag(t)">
-              <img
+              <BaseImage
                 v-if="isImageIcon(t.smallIcon || t.icon)"
                 :src="t.smallIcon || t.icon"
                 class="section-item-icon"

frontend_nuxt/components/ReactionsGroup.vue

@@ -14,7 +14,7 @@
             :class="{ selected: userReacted(r.type) }"
             @click="toggleReaction(r.type)"
           >
-            <img :src="reactionEmojiMap[r.type]" class="emoji" alt="emoji" />
+            <BaseImage :src="reactionEmojiMap[r.type]" class="emoji" alt="emoji" />
             <div>{{ counts[r.type] }}</div>
           </div>
 
@@ -30,7 +30,7 @@
             class="reactions-viewer-item"
             @click="openPanel"
           >
-            <img :src="reactionEmojiMap[r.type]" class="emoji" alt="emoji" />
+            <BaseImage :src="reactionEmojiMap[r.type]" class="emoji" alt="emoji" />
           </div>
           <div class="reactions-count">{{ totalCount }}</div>
         </template>
@@ -61,7 +61,7 @@
         @click="toggleReaction(t)"
         :class="{ selected: userReacted(t) }"
       >
-        <img :src="reactionEmojiMap[t]" class="emoji" alt="emoji" /><span v-if="counts[t]">{{
+        <BaseImage :src="reactionEmojiMap[t]" class="emoji" alt="emoji" /><span v-if="counts[t]">{{
           counts[t]
         }}</span>
       </div>

frontend_nuxt/components/SearchPersonDropdown.vue

@@ -24,7 +24,7 @@
       </template>
       <template #option="{ option }">
         <div class="search-option-item">
-          <img
+          <BaseImage
             :src="option.avatar || '/default-avatar.svg'"
             class="avatar"
             @error="handleAvatarError"

frontend_nuxt/components/TagSelect.vue

@@ -11,7 +11,7 @@
       <div class="option-container">
         <div class="option-main">
           <template v-if="option.icon">
-            <img
+            <BaseImage
               v-if="isImageIcon(option.icon)"
               :src="option.icon"
               class="option-icon"

frontend_nuxt/components/UserList.vue

@@ -2,7 +2,7 @@
   <div class="user-list">
     <BasePlaceholder v-if="users.length === 0" text="暂无用户" icon="fas fa-inbox" />
     <div v-for="u in users" :key="u.id" class="user-item" @click="handleUserClick(u)">
-      <img :src="u.avatar" alt="avatar" class="user-avatar" />
+      <BaseImage :src="u.avatar" alt="avatar" class="user-avatar" />
       <div class="user-info">
         <div class="user-name">{{ u.username }}</div>
         <div v-if="u.introduction" class="user-intro">{{ u.introduction }}</div>