图片和视频加载错误显示

src/assets/svg/imageloadfailed.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1744875720033" class="svg-icon" viewBox="0 0 1412 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9979" xmlns:xlink="http://www.w3.org/1999/xlink" width="275.78125" height="200"><path d="M1393.516743 51.782272a71.326417 71.326417 0 0 0-49.610701-22.527848L803.837949 8.24491l-40.906759 89.140366 56.231346 167.72301-101.675454 190.815821 41.436411 153.634277 102.540552 131.794976 148.690862-135.767363c6.956091-6.355819 16.189684-9.622004 25.599828-9.268903 9.392489 0.353101 18.449531 4.466729 24.717075 11.352199l191.168921 204.392557a35.310107 35.310107 0 0 1 6.267544 38.699878 35.857414 35.857414 0 0 1-33.774117 20.479862l-523.878409-20.303312-26.129479 74.151226 28.389326 66.912653 602.213882 23.075155a71.785448 71.785448 0 0 0 51.199656-18.767322 69.790427 69.790427 0 0 0 22.810329-49.028084l33.597567-844.917905a69.084225 69.084225 0 0 0-18.802632-50.581729zM1006.517966 439.257736c-59.020845-2.242192-104.976949-51.446826-102.717103-109.779124 2.259847-58.314642 52.047098-103.741096 111.067943-101.516559 59.020845 2.259847 104.994604 51.464482 102.717103 109.779124-2.259847 58.332297-52.047098 103.741096-111.067943 101.516559z m-388.234631 487.049966l18.09643-77.752856-425.345554 28.901323A35.769139 35.769139 0 0 1 176.553891 858.0003a35.115902 35.115902 0 0 1 5.049346-38.894084l315.125053-357.691388a35.804449 35.804449 0 0 1 25.952929-12.023091 36.08693 36.08693 0 0 1 26.623821 10.822548l105.506601 108.755131-45.444108-115.976048 80.083323-200.084724-73.798124-160.184302L646.443146 0 66.351046 39.564975C26.980277 42.319164-2.591938 75.863766 0.179905 114.757849l58.844294 843.717361a69.419671 69.419671 0 0 0 24.205079 48.162987 72.562271 72.562271 0 0 0 51.711652 17.213677l517.963965-35.274797-34.65687-62.28703z" p-id="9980"></path></svg>

src/assets/svg/videoloadfailed.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1744876866180" class="svg-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13144" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M876.416 272.137H707.763L840.277 91.69c18.065-24.047 12.05-60.135-12.049-81.186C804.13-7.552 768-1.545 746.914 22.519L566.212 269.133h-72.286l-271.06-168.431c-27.103-15.027-63.241-9.02-78.303 18.048-12.049 18.048-12.049 33.084-9.037 48.12 3.013 15.035 12.05 27.076 24.09 36.087l114.44 69.171H147.585C66.261 272.137 0 338.304 0 419.498v457.114C0 957.815 66.261 1024 147.584 1024h728.832C957.73 1024 1024 957.815 1024 876.62V419.5c0-81.195-66.27-147.362-147.584-147.362zM150.579 572.894l-3.004-15.044c-3.02-21.06 9.037-42.112 30.115-45.133l162.636-30.063c21.078-3.004 42.155 9.037 45.167 30.063l3.021 15.053c3.012 21.051-9.037 42.103-30.114 45.124l-162.637 30.054c-21.077 3.021-42.163-9.002-45.184-30.054z m472.858 228.548c-15.07 9.028-30.114 15.053-54.221 15.053-18.065 0-36.13-9.028-51.183-27.076-3.02-3.021-6.033-3.021-9.045 0-36.139 36.087-93.372 33.083-126.498-6.016-15.053-21.06-24.09-42.104-24.09-69.163 0-15.053 12.05-24.073 24.09-24.073 12.049 0 24.09 9.029 24.09 24.073 0 12.023 3.02 27.06 12.048 36.079 12.05 18.03 33.135 21.052 48.188 6.024 12.04-9.028 18.074-21.051 18.074-36.096v-6.007c0-27.076 51.2-27.076 51.2 0 0 12.023 3.003 24.047 12.032 36.079 18.082 21.052 42.163 21.052 57.233-3.004 6.024-9.02 9.045-21.052 9.045-33.075 0-12.04 9.037-21.077 18.065-24.073s21.086 3.004 27.102 12.032c3.03 3.004 3.03 6.016 3.03 12.041 3.003 36.079-9.046 66.15-39.16 87.202zM876.416 557.85l-3.02 15.044c-3.005 21.052-24.082 36.079-45.168 30.054l-159.616-30.054c-21.086-3.02-36.147-24.073-30.114-45.124l3.004-15.053c3.02-21.035 24.098-36.088 45.184-30.063l159.616 30.063c21.077 3.02 33.135 24.072 30.114 45.133z m0 0" p-id="13145"></path></svg>

src/views/message/components/ImageMsgBox.vue

@@ -3,6 +3,7 @@ import { computed } from 'vue'
 import { ElImage } from 'element-plus'
 import { formatFileSize } from '@/js/utils/common'
 import { useImageStore } from '@/stores'
+import ImageloadfailedIcon from '@/assets/svg/imageloadfailed.svg'
 
 const props = defineProps(['sessionId', 'imgId', 'isForMix', 'thumbWidth', 'thumbHeight'])
 const emits = defineEmits(['load'])
@@ -91,10 +92,18 @@ const formatSize = computed(() => {
     >
       <template #placeholder>
         <div
-          class="image-msg-placeholder loading"
+          class="image-msg-bgc loading"
           :style="{ width: `${renderWidth}px`, height: `${renderHeight}px` }"
         ></div>
       </template>
+      <template #error>
+        <div
+          class="image-msg-bgc error"
+          :style="{ width: `${renderWidth}px`, height: `${renderHeight}px` }"
+        >
+          <ImageloadfailedIcon style="width: 48px; height: 48px; fill: #fff" />
+        </div>
+      </template>
     </el-image>
     <div v-if="fileName || size > 0" class="info">
       <span class="name item text-ellipsis" :title="fileName">
@@ -149,11 +158,11 @@ const formatSize = computed(() => {
   }
 }
 
-.image-msg-placeholder {
+.image-msg-bgc {
   background-color: #000;
 }
 
-.image-msg-placeholder.loading::before {
+.image-msg-bgc.loading::before {
   content: '';
   box-sizing: border-box;
   position: absolute;
@@ -169,6 +178,13 @@ const formatSize = computed(() => {
   animation: spin 1s ease-in-out infinite;
 }
 
+.image-msg-bgc.error {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
 @keyframes spin {
   to {
     transform: rotate(360deg);

src/views/message/components/VideoMsgBox.vue

@@ -3,11 +3,12 @@ import { ref, onMounted, computed } from 'vue'
 import Player from 'xgplayer'
 import 'xgplayer/dist/index.min.css'
 import { formatFileSize } from '@/js/utils/common'
+import VideoloadfailedIcon from '@/assets/svg/videoloadfailed.svg'
 
 const props = defineProps(['videoId', 'url', 'fileName', 'size', 'width', 'height'])
 const emits = defineEmits(['load'])
 
-const isLoaded = ref(false)
+const isLoaded = ref(0) // 0未加载，1加载成功，2加载失败
 const isClickPlay = ref(false)
 const videoWrapperRef = ref(null)
 
@@ -59,20 +60,30 @@ onMounted(() => {
       videoWrapperRef.value.style.width = `${renderWidth.value}px`
       videoWrapperRef.value.style.height = `${renderHeight.value}px`
       videoWrapperRef.value.style.padding = 0
-      isLoaded.value = true
+      isLoaded.value = 1
       emits('load') //向父组件暴露load事件
     })
   })
+
+  // 监听视频加载失败事件
+  player.on('error', () => {
+    isLoaded.value = 2
+  })
 })
 </script>
 
 <template>
   <div
     class="video-msg-wrapper"
-    :class="{ loading: !isLoaded }"
+    :class="{ loading: isLoaded === 0 }"
     :style="{ width: `${renderWidth}px`, height: `${renderHeight}px` }"
   >
-    <div v-show="isLoaded" ref="videoWrapperRef" :id="`msg-xgplayer-${props.videoId}`"></div>
+    <div v-show="isLoaded === 1" ref="videoWrapperRef" :id="`msg-xgplayer-${props.videoId}`"></div>
+    <div v-show="isLoaded === 2" class="error">
+      <VideoloadfailedIcon style="width: 48px; height: 48px; fill: #fff" />
+      <span style="color: #fff">视频加载失败</span>
+    </div>
+
     <div v-if="!isClickPlay && (props.fileName || props.size > 0)" class="info">
       <span class="name item text-ellipsis" :title="props.fileName">
         {{ props.fileName || '' }}
@@ -88,6 +99,9 @@ onMounted(() => {
 .video-msg-wrapper {
   position: relative;
   background: #000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
   .info {
     width: 100%;
@@ -114,6 +128,13 @@ onMounted(() => {
       margin-right: 8px;
     }
   }
+
+  .error {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+  }
 }
 
 .video-msg-wrapper.loading::before {