fix: updates image resources and fixes metrics

- Changes fallback image path from sink.png to icon.png
- Adds lazy loading attribute to improve performance
- Fixes v-slot syntax in metrics list component
- Updates "No more" text to "No more links" for clarity
This commit is contained in:
ccbikai 2024-12-25 12:13:50 +08:00
parent 480824f36f
commit 5abc4af3f5
5 changed files with 9 additions and 5 deletions

View file

@ -80,7 +80,7 @@ function updateLinkList(link, type) {
v-if="!isLoading && listComplete" v-if="!isLoading && listComplete"
class="flex items-center justify-center text-sm" class="flex items-center justify-center text-sm"
> >
No more No more links
</div> </div>
<div <div
v-if="listError" v-if="listError"

View file

@ -23,7 +23,7 @@ function getLinkHost(url) {
} }
const shortLink = computed(() => `${origin}/${props.link.slug}`) const shortLink = computed(() => `${origin}/${props.link.slug}`)
const linkIcon = computed(() => `https://unavatar.io/${getLinkHost(props.link.url)}?fallback=https://sink.cool/sink.png`) const linkIcon = computed(() => `https://unavatar.io/${getLinkHost(props.link.url)}?fallback=https://sink.cool/icon.png`)
const { copy, copied } = useClipboard({ source: shortLink.value, copiedDuring: 400 }) const { copy, copied } = useClipboard({ source: shortLink.value, copiedDuring: 400 })
@ -44,11 +44,13 @@ function updateLink(link, type) {
<AvatarImage <AvatarImage
:src="linkIcon" :src="linkIcon"
alt="@radix-vue" alt="@radix-vue"
loading="lazy"
/> />
<AvatarFallback> <AvatarFallback>
<img <img
src="/sink.png" src="/icon.png"
alt="Sink" alt="Sink"
loading="lazy"
> >
</AvatarFallback> </AvatarFallback>
</Avatar> </Avatar>

View file

@ -30,7 +30,7 @@ defineProps({
</div> </div>
</div> </div>
<VList <VList
v-slot="metric" v-slot="{ item: metric }"
:data="metrics" :data="metrics"
:style="{ height: '342px' }" :style="{ height: '342px' }"
> >

View file

@ -17,11 +17,13 @@ defineProps({
<AvatarImage <AvatarImage
:src="`https://unavatar.io/${name}?fallback=false`" :src="`https://unavatar.io/${name}?fallback=false`"
alt="@radix-vue" alt="@radix-vue"
loading="lazy"
/> />
<AvatarFallback> <AvatarFallback>
<img <img
src="/sink.png" src="/icon.png"
alt="Sink" alt="Sink"
loading="lazy"
> >
</AvatarFallback> </AvatarFallback>
</Avatar> </Avatar>

BIN
public/icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB