|
1 | 1 | <script setup lang='ts'>
|
2 | 2 | import type { PropType } from 'vue'
|
3 |
| -import { computed, defineComponent, ref, watchEffect } from 'vue' |
| 3 | +import { computed, defineComponent } from 'vue' |
4 | 4 | import classNames from 'classnames'
|
5 | 5 | import { Icon } from '@iconify/vue'
|
6 | 6 | import type { VariantJSWithClassesListProps } from '../../../utils/getVariantProps'
|
@@ -60,17 +60,6 @@ const props = defineProps({
|
60 | 60 |
|
61 | 61 | })
|
62 | 62 |
|
63 |
| -const avatarUrl = ref('') |
64 |
| -
|
65 |
| -watchEffect(() => { |
66 |
| - const img = new Image() |
67 |
| - img.src = props.src |
68 |
| - img.decode().then(() => (avatarUrl.value = props.src)).catch((err: string) => { |
69 |
| - avatarUrl.value = '' |
70 |
| - throw err |
71 |
| - }) |
72 |
| -}) |
73 |
| -
|
74 | 63 | const placeholder = computed(() => {
|
75 | 64 | return (props.alt || '').split(' ').map(word => word.charAt(0)).join('').substring(0, 2)
|
76 | 65 | })
|
@@ -143,9 +132,9 @@ export default defineComponent({
|
143 | 132 |
|
144 | 133 | <template>
|
145 | 134 | <span :class="[avatarWrapperClasses, avatarClasses]" :title="props.name">
|
146 |
| - <img v-if="avatarUrl" :class="avatarClasses" :src="avatarUrl" :alt="props.name"> |
147 |
| - <span v-else-if="!avatarUrl" :class="variant.avatarPlaceholderClass">{{ placeholder }}</span> |
148 |
| - <Icon v-if="!avatarUrl && !placeholder" :icon="props.icon" :class="[avatarIconSize, variant.avatarIconColor]" /> |
| 135 | + <img v-if="props.src" :class="avatarClasses" :src="props.src" :alt="props.name"> |
| 136 | + <span v-else-if="!props.src" :class="variant.avatarPlaceholderClass">{{ placeholder }}</span> |
| 137 | + <Icon v-if="!props.src && !placeholder" :icon="props.icon" :class="[avatarIconSize, variant.avatarIconColor]" /> |
149 | 138 | <span v-if="props.chipColor" :style="avatarChipColorStyles" :class="[avatarChipClass, avatarChipSize]">
|
150 | 139 | {{ chipText }}
|
151 | 140 | </span>
|
|
0 commit comments