ff-admin/src/components/AppLogo.vue

<template>
  <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">
import { url } from "@/serverCom";
import { useSettingStore } from "@/stores/admin/management/setting";
import { mapState } from "pinia";
import { defineComponent } from "vue";
</script>

<script lang="ts">
export default defineComponent({
  watch: {
    logo() {
      (this.$refs.logo as HTMLImageElement).src = url + "/api/public/applogo.png?t=" + new Date().getTime();
    },
  },
  data() {
    return {
      useFallback: false,
    };
  },
  computed: {
    ...mapState(useSettingStore, ["readSetting"]),
    logo() {
      return this.readSetting("club.logo");
    },
  },
});
</script>