chore(forum): 优化图片上传和加载时的错误处理

Author: jiazengp

.vitepress/theme/components/ui/image/Image.vue

@@ -1,89 +1,88 @@
 <script setup lang="ts">
 import { withBase } from 'vitepress'
-import mediumZoom, { type Zoom, type ZoomOptions } from 'medium-zoom'
-
+import mediumZoom, { type ZoomOptions } from 'medium-zoom'
+import {
+  onMounted,
+  onUnmounted,
+  ref,
+  computed,
+  useTemplateRef,
+  watch,
+  useAttrs,
+} from 'vue'
+import { cn } from '@/lib/utils'
 import type { DefaultTheme } from 'vitepress/theme-without-fonts'
-import { onMounted, onUnmounted, useTemplateRef, watch } from 'vue'
 
 interface Props {
   image?: DefaultTheme.ThemeableImage
   alt?: string
   zoom?: ZoomOptions | false
+  class?: string
 }
 
-const {
-  zoom: zoomConfig = {
-    background: 'transparent',
-  },
-} = defineProps<Props>()
+const { zoom: zoomConfig = { background: 'transparent' }, image } =
+  defineProps<Props>()
 
 defineOptions({ inheritAttrs: false })
 
 const img = useTemplateRef('img')
+const loadFail = ref(false)
+const attrs = useAttrs()
+// 计算 `imgSrc`，动态监听 `image` 变化
+const imgSrc = computed(() =>
+  withBase(
+    (typeof image === 'string' ? image : image?.src) ||
+      attrs?.src ||
+      'https://assets.yuanshen.site/images/noImage.png',
+  ),
+)
 
-const initZoom = () => {
-  if (zoomConfig === false) return
-  let zoom: Zoom | null = null
-
-  const getZoom = () => (zoom === null ? mediumZoom(zoomConfig) : zoom)
+// medium-zoom 只创建一次，避免重复初始化
+const zoom = zoomConfig === false ? null : mediumZoom(zoomConfig)
 
-  onMounted(() => {
-    if (!img.value) return
+const initZoom = () => {
+  if (!zoom || !img.value) return
+  zoom.attach(img.value)
+}
 
-    getZoom().attach(img.value)
+onMounted(initZoom)
+onUnmounted(() => zoom?.detach())
 
-    watch(
-      () => zoomConfig,
-      (options) => {
-        const zoom = getZoom()
-        zoom.update(zoomConfig || {})
-      },
-    )
-  })
+// 监听 zoomConfig 的变化，避免 Vue 的 shallow 监听失效
+watch(
+  () => JSON.stringify(zoomConfig),
+  () => zoom?.update(zoomConfig || {}),
+)
 
-  onUnmounted(() => {
-    if (img.value) getZoom().detach()
-  })
+const handleLoadError = () => {
+  loadFail.value = true
 }
-
-initZoom()
 </script>
 
 <template>
-  <template v-if="image">
+  <img
+    v-if="!loadFail"
+    ref="img"
+    v-bind="typeof image === 'string' ? $attrs : { ...image, ...$attrs }"
+    :src="imgSrc"
+    :alt="alt ?? (typeof image === 'string' ? '' : image?.alt || '')"
+    :class="cn('VPImage', $props.class)"
+    @error="handleLoadError"
+  />
+  <template v-else>
     <img
-      v-if="typeof image === 'string' || 'src' in image"
-      ref="img"
-      class="VPImage"
+      :class="cn('VPImage bg-[var(--vp-c-bg-alt)]', $props.class)"
+      :alt="alt ?? (typeof image === 'string' ? '' : image?.alt || '')"
       v-bind="typeof image === 'string' ? $attrs : { ...image, ...$attrs }"
-      :src="withBase(typeof image === 'string' ? image : image.src)"
-      :alt="alt ?? (typeof image === 'string' ? '' : image.alt || '')"
+      src="https://assets.yuanshen.site/images/noImage.png"
     />
-    <template v-else>
-      <Image
-        class="dark"
-        :image="image.dark"
-        :alt="image.alt"
-        v-bind="$attrs"
-      />
-      <Image
-        class="light"
-        :image="image.light"
-        :alt="image.alt"
-        v-bind="$attrs"
-      />
-    </template>
-  </template>
-  <template v-else>
-    <img ref="img" class="VPImage" v-bind="$attrs" />
   </template>
 </template>
 
 <style scoped>
 html:not(.dark) .VPImage.dark {
   display: none;
 }
-
 .dark .VPImage.light {
   display: none;
 }

.vitepress/theme/components/ui/image/Images.vue

@@ -10,7 +10,7 @@
     >
       <Image
         class="object-cover flex-1"
-        :class="{ 'flex-1': images.length === 3 && index === 0 }"
+        :class="images.length === 3 && index === 0 ? 'flex-1' : ''"
         :data-image-index="index"
         :image="image"
       />

src/components/forum/ForumTopic.vue

@@ -50,12 +50,11 @@
         v-if="topic.content?.images"
       >
         <Image
-          v-for="(img, index) in topic.content.images"
-          :key="index"
-          B
-          :src="img.src"
+          v-for="img in topic.content.images"
+          :key="img.src"
+          :image="img.src"
           :alt="img.alt"
-          class="max-h-24 mr-4 rounded-sm"
+          class="max-h-30 max-w-30 object-cover mr-4 rounded-sm"
         />
       </div>
     </div>

src/components/forum/ForumTopicComment.vue

@@ -28,8 +28,8 @@
 
       <div class="topic-content-img flex mt-4" v-if="body?.images">
         <Image
-          v-for="(img, ind) in body.images"
-          :key="ind"
+          v-for="img in body.images"
+          :key="img.src"
           :src="img.src"
           :alt="img.alt"
           class="max-h-24 mr-4 rounded-sm"

src/components/forum/publish-topic-form/ForumPublishTopicForm.vue

@@ -108,7 +108,12 @@ const switchTab = () => {
 
 const handleSubmit = async () => {
   formData.value.body.images?.forEach((val, ind) => {
-    if (val.status === 'uploading' || !val.url) return
+    if (
+      val.status === 'uploading' ||
+      !val?.url ||
+      val.url?.substring(3) === 'blob'
+    )
+      return
     uploadedImages.value.push(val.url)
   })
 
@@ -128,8 +133,9 @@ watch(
   () => formData.value.body.images,
   () => {
     isUploading.value =
-      formData.value.body.images?.some((val) => val.status === 'uploading') ??
-      false
+      formData.value.body.images?.some(
+        (val) => val.status === 'uploading' || val.url?.substring(3) === 'blob',
+      ) ?? false
   },
   {
     deep: true,