优化房间背景svga代码先后流程

src/views/roomBackground/roomBackground.vue

@@ -295,12 +295,19 @@
           :before-upload="beforeAvatarUpload"
           :on-error="handleAvatarError"
         >
-          <img
-            v-if="dialogObj.imageUrl2"
+          <!-- 这里是原来的图片预览 -->
+          <el-image
+            v-if="!dialogObj.imageUrl2.toLowerCase().endsWith('.svga')"
+            style="width: 100px; height: 100px"
             :src="dialogObj.imageUrl2"
-            class="avatar"
+            :zoom-rate="1.1"
+            fit="cover"
+            preview-teleported="true"
+            hide-on-click-modal="true"
           />
-          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+          <div v-else id="guide2" class="game-guide">
+            {{ guideFn2(dialogObj.imageUrl2) }}
+          </div>
         </el-upload>
       </div>
       <!-- <div class="dialogBox">
@@ -343,6 +350,7 @@ import {
 import { dateFormat } from "@/utils/system-helper";
 // @ts-ignore
 import { ElMessage, ElTable } from "element-plus";
+import { ref, onMounted, nextTick } from "vue";
 import SVGA from "svgaplayerweb";
 export default {
   name: "roomBackground",
@@ -405,16 +413,34 @@ export default {
   },
   methods: {
     guideFn(id, url) {
-      if (url.toLowerCase().endsWith(".svga")) {
-        // 获取id的dom元素
-        let player = new SVGA.Player(`#guide${id}`);
-        let parser = new SVGA.Parser();
-        parser.load(url, (videoItem) => {
-          // 你的svga文件路径
-          player.setVideoItem(videoItem);
-          player.startAnimation(); // 开始动画
-        });
-      }
+      // 等待 DOM 渲染完成
+      this.$nextTick(() => {
+        const guideElement = document.getElementById("guide" + id);
+        if (guideElement && url.toLowerCase().endsWith(".svga")) {
+          let player = new SVGA.Player(guideElement);
+          let parser = new SVGA.Parser();
+          parser.load(url, (videoItem) => {
+            // 你的svga文件路径
+            player.setVideoItem(videoItem);
+            player.startAnimation(); // 开始动画
+          });
+        }
+      });
+    },
+    guideFn2(url) {
+      // 等待 DOM 渲染完成
+      this.$nextTick(() => {
+        const guideElement = document.getElementById("guide2");
+        if (guideElement && url.toLowerCase().endsWith(".svga")) {
+          let player = new SVGA.Player(guideElement);
+          let parser = new SVGA.Parser();
+          parser.load(url, (videoItem) => {
+            // 你的 svga 文件路径
+            player.setVideoItem(videoItem);
+            player.startAnimation(); // 开始动画
+          });
+        }
+      });
     },
     // 查询接口
     getData() {
@@ -570,6 +596,7 @@ export default {
       this.getData();
     },
   },
+  mounted() {},
 };
 </script>
 <style lang="less" scoped>