add: logo and icon fallback on server error

src/App.vue

@@ -12,6 +12,7 @@
   <Teleport to="head">
     <title>{{ clubName }}</title>
     <link rel="icon" type="image/ico" :href="config.server_address + '/api/public/favicon.ico'" />
+    <link rel="icon" type="image/png" href="/icon.png" />
     <link rel="manifest" :href="config.server_address + '/api/public/manifest.webmanifest'" />
   </Teleport>
 </template>

src/components/AppIcon.vue

@@ -1,5 +1,13 @@
 <template>
-  <img ref="icon" :src="url + '/api/public/icon.png'" alt="LOGO" class="h-full w-auto" />
+  <img v-if="useFallback" ref="fallback" src="/icon.png" alt="LOGO" class="h-full w-auto" />
+  <img
+    v-else
+    ref="icon"
+    :src="url + '/api/public/icon.png'"
+    alt="LOGO"
+    class="h-full w-auto"
+    @error="useFallback = true"
+  />
 </template>
 
 <script setup lang="ts">
@@ -16,6 +24,11 @@ export default defineComponent({
       (this.$refs.icon as HTMLImageElement).src = url + "/api/public/icon.png?" + new Date().getTime();
     },
   },
+  data() {
+    return {
+      useFallback: false,
+    };
+  },
   computed: {
     ...mapState(useSettingStore, ["readSetting"]),
     icon() {

src/components/AppLogo.vue

@@ -1,5 +1,13 @@
 <template>
-  <img ref="logo" :src="url + '/api/public/applogo.png'" alt="LOGO" class="h-full w-auto" />
+  <img v-if="useFallback" ref="fallback" src="/admin-logo.png" alt="LOGO" class="h-full w-auto" />
+  <img
+    v-else
+    ref="logo"
+    :src="url + '/api/public/applogo.png'"
+    alt="LOGO"
+    class="h-full w-auto"
+    @error="useFallback = true"
+  />
 </template>
 
 <script setup lang="ts">
@@ -16,6 +24,11 @@ export default defineComponent({
       (this.$refs.logo as HTMLImageElement).src = url + "/api/public/applogo.png?t=" + new Date().getTime();
     },
   },
+  data() {
+    return {
+      useFallback: false,
+    };
+  },
   computed: {
     ...mapState(useSettingStore, ["readSetting"]),
     logo() {