From da42c0489a501724e5bbcfedc76103df3d84f35d Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 17 Jul 2024 16:39:37 +0200
Subject: [PATCH] fix(Avatar): bind `$attrs` on image

---
 src/runtime/components/Avatar.vue | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/runtime/components/Avatar.vue b/src/runtime/components/Avatar.vue
index c86fbee1..e914d96e 100644
--- a/src/runtime/components/Avatar.vue
+++ b/src/runtime/components/Avatar.vue
@@ -12,6 +12,10 @@ const avatar = tv({ extend: tv(theme), ...(appConfig.ui?.avatar || {}) })
 type AvatarVariants = VariantProps<typeof avatar>
 
 export interface AvatarProps extends Pick<AvatarFallbackProps, 'delayMs'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'img'
+   */
   as?: string | object
   src?: string
   alt?: string
@@ -30,6 +34,8 @@ import { reactivePick } from '@vueuse/core'
 import { UIcon } from '#components'
 import { useAvatarGroup } from '#imports'
 
+defineOptions({ inheritAttrs: false })
+
 const props = defineProps<AvatarProps>()
 
 const fallbackProps = useForwardProps(reactivePick(props, 'delayMs'))
@@ -46,7 +52,14 @@ const ui = computed(() => avatar({
 
 <template>
   <AvatarRoot :class="ui.root({ class: props.class })">
-    <AvatarImage v-if="src" :as="as" :src="src" :alt="alt" :class="ui.image({ class: props.ui?.image })" />
+    <AvatarImage
+      v-if="src"
+      :as="as"
+      :src="src"
+      :alt="alt"
+      v-bind="$attrs"
+      :class="ui.image({ class: props.ui?.image })"
+    />
 
     <AvatarFallback as-child v-bind="fallbackProps">
       <UIcon v-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />