feat(Avatar): use NuxtImg component when available

Resolves nuxt/ui#2078

src/runtime/components/Avatar.vue

@@ -15,9 +15,9 @@ type AvatarVariants = VariantProps<typeof avatar>
 export interface AvatarProps extends Pick<AvatarFallbackProps, 'delayMs'> {
   /**
    * The element or component this component should render as.
-   * @defaultValue 'img'
+   * @defaultValue 'span'
    */
-  as?: string | object
+  as?: any
   src?: string
   alt?: string
   icon?: string
@@ -36,10 +36,11 @@ import { AvatarRoot, AvatarImage, AvatarFallback, useForwardProps } from 'radix-
 import { reactivePick } from '@vueuse/core'
 import { useAvatarGroup } from '../composables/useAvatarGroup'
 import UIcon from './Icon.vue'
+import ImageComponent from '#build/ui-image-component'
 
 defineOptions({ inheritAttrs: false })
 
-const props = defineProps<AvatarProps>()
+const props = withDefaults(defineProps<AvatarProps>(), { as: 'span' })
 
 const fallbackProps = useForwardProps(reactivePick(props, 'delayMs'))
 
@@ -54,10 +55,10 @@ const ui = computed(() => avatar({
 </script>
 
 <template>
-  <AvatarRoot :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <AvatarRoot :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
     <AvatarImage
       v-if="src"
-      :as="as"
+      :as="ImageComponent"
       :src="src"
       :alt="alt"
       v-bind="$attrs"