diff --git a/packages/client/src/components/MkInstanceCardMini.vue b/packages/client/src/components/MkInstanceCardMini.vue index f6e2f4eaa7d97597397afb79b0746a8c17461305..4625de40af1646ad5af4e97febae62809c1a0e14 100644 --- a/packages/client/src/components/MkInstanceCardMini.vue +++ b/packages/client/src/components/MkInstanceCardMini.vue @@ -1,6 +1,6 @@ <template> <div :class="[$style.root, { yellow: instance.isNotResponding, red: instance.isBlocked, gray: instance.isSuspended }]"> - <img v-if="instance.iconUrl" class="icon" :src="instance.iconUrl" alt=""/> + <img class="icon" :src="getInstanceIcon(instance)" alt=""/> <div class="body"> <span class="host">{{ instance.name ?? instance.host }}</span> <span class="sub _monospace"><b>{{ instance.host }}</b> / {{ instance.softwareName || '?' }} {{ instance.softwareVersion }}</span> @@ -13,6 +13,7 @@ import * as misskey from 'misskey-js'; import MkMiniChart from '@/components/MkMiniChart.vue'; import * as os from '@/os'; +import { getProxiedImageUrlNullable } from '@/scripts/media-proxy'; const props = defineProps<{ instance: misskey.entities.Instance; @@ -25,6 +26,10 @@ os.apiGet('charts/instance', { host: props.instance.host, limit: 16 + 1, span: ' res.requests.received.splice(0, 1); chartValues = res.requests.received; }); + +function getInstanceIcon(instance): string { + return getProxiedImageUrlNullable(instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? '/client-assets/dummy.png'; +} </script> <style lang="scss" module>