🐛 修复图片渲染异常

src/components/userRecord/tur-home-sub.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     :style="{
-      backgroundImage: 'url(' + getUrl.bg + ')',
+      backgroundImage: 'url(' + props.data.bg + ')',
       backgroundSize: 'cover',
     }"
     class="tur-hs-box"
@@ -10,7 +10,7 @@
       {{ data.name }}
     </div>
     <div class="tur-hs-title">
-      <img :src="getUrl.icon" alt="comfort" />
+      <img :src="props.data.comfortIcon" alt="comfort" />
       {{ data.comfortName }}
     </div>
     <div class="tur-hs-text-grid">
@@ -34,24 +34,11 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { onMounted, ref } from "vue";
-
-import { saveImgLocal } from "../../utils/TGShare.js";
-
 interface TurHomeSubProps {
   data: TGApp.Sqlite.Record.Home;
 }
 
 const props = defineProps<TurHomeSubProps>();
-const getUrl = ref({
-  icon: "",
-  bg: "",
-});
-
-onMounted(async () => {
-  getUrl.value.icon = await saveImgLocal(props.data.comfortIcon);
-  getUrl.value.bg = await saveImgLocal(props.data.bg);
-});
 </script>
 <style lang="css" scoped>
 .tur-hs-box {

src/components/userRecord/tur-world-sub.vue

@@ -44,7 +44,6 @@ import { Event, UnlistenFn } from "@tauri-apps/api/event";
 import { computed, onMounted, onUnmounted, ref } from "vue";
 
 import { useAppStore } from "../../store/modules/app.js";
-import { saveImgLocal } from "../../utils/TGShare.js";
 
 interface TurWorldSubProps {
   data: TGApp.Sqlite.Record.WorldExplore;
@@ -52,13 +51,13 @@ interface TurWorldSubProps {
 
 const props = defineProps<TurWorldSubProps>();
 let themeListener: UnlistenFn | null = null;
-const bg = ref<string>();
 const icon = ref<string>();
-const iconLight = ref<string>();
-const iconDark = ref<string>();
 const offer = ref<string>();
 const appStore = useAppStore();
 
+const bg = computed<string>(() => {
+  return `url('${props.data.bg}')`;
+});
 const imgFilter = computed<string>(() => {
   if (props.data.name !== "纳塔") return "none";
   if (appStore.theme === "dark") return "none";
@@ -68,23 +67,12 @@ const imgFilter = computed<string>(() => {
 onMounted(async () => {
   themeListener = await event.listen("readTheme", (e: Event<string>) => {
     const theme = e.payload;
-    if (theme === "dark") {
+    if (theme === "dark") icon.value = props.data.iconLight;
-      icon.value = iconLight.value;
+    else icon.value = props.data.iconDark;
-    } else {
-      icon.value = iconDark.value;
-    }
   });
-  bg.value = `url('${await saveImgLocal(props.data.bg)}')`;
+  if (props.data.offering) offer.value = props.data.offering.icon;
-  iconLight.value = await saveImgLocal(props.data.iconLight);
+  if (appStore.theme === "dark") icon.value = props.data.iconLight;
-  iconDark.value = await saveImgLocal(props.data.iconDark);
+  else icon.value = props.data.iconDark;
-  if (props.data.offering) {
-    offer.value = await saveImgLocal(props.data.offering.icon);
-  }
-  if (appStore.theme === "dark") {
-    icon.value = iconLight.value;
-  } else {
-    icon.value = iconDark.value;
-  }
 });
 
 onUnmounted(() => {
@@ -92,18 +80,6 @@ onUnmounted(() => {
     themeListener();
     themeListener = null;
   }
-  const urlList = [iconLight.value, iconDark.value, offer.value];
-  urlList.forEach((url) => {
-    URL.revokeObjectURL(typeof url === "string" ? url : "");
-  });
-  const reg = /url\(['"]?([^'"]*)['"]?\)/;
-  if (bg.value) {
-    const bgOri = bg.value?.replace("url('", "").replace("')", "");
-    const bgUrl = bgOri.match(reg);
-    if (bgUrl) {
-      URL.revokeObjectURL(bgUrl[1]);
-    }
-  }
 });
 </script>
 <style lang="css" scoped>