Skip to content

Commit

Permalink
fix(Avatar): url error handling (#39)
Browse files Browse the repository at this point in the history
  • Loading branch information
smarroufin committed Mar 14, 2022
1 parent 9554e80 commit fb3ff2e
Showing 1 changed file with 14 additions and 2 deletions.
16 changes: 14 additions & 2 deletions src/runtime/components/elements/Avatar.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<span :class="wrapperClass">
<img v-if="url" :class="avatarClass" :src="url" :alt="alt">
<img v-if="url && !error" :class="avatarClass" :src="url" :alt="alt" :onerror="() => onError()">
<span v-else-if="text || placeholder" :class="placeholderClass">{{ text || placeholder }}</span>

<span v-if="chip" :class="chipClass" />
Expand Down Expand Up @@ -102,6 +102,18 @@ const url = computed(() => {
})
const placeholder = computed(() => {
return (props.alt || '').split(' ').map(word => word.charAt(0)).join('').substr(0, 2)
return (props.alt || '').split(' ').map(word => word.charAt(0)).join('').substring(0, 2)
})
const error = ref(false)
watch(() => props.src, () => {
if (error.value) {
error.value = false
}
})
function onError () {
error.value = true
}
</script>

1 comment on commit fb3ff2e

@vercel
Copy link

@vercel vercel bot commented on fb3ff2e Mar 14, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.