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"
class="flex items-center justify-center text-sm"
>
No more
No more links
</div>
<div
v-if="listError"

View file

@ -23,7 +23,7 @@ function getLinkHost(url) {
}
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 })
@ -44,11 +44,13 @@ function updateLink(link, type) {
<AvatarImage
:src="linkIcon"
alt="@radix-vue"
loading="lazy"
/>
<AvatarFallback>
<img
src="/sink.png"
src="/icon.png"
alt="Sink"
loading="lazy"
>
</AvatarFallback>
</Avatar>

View file

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

View file

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

BIN
public/icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB