[Avatar] Integration with Nuxt Image for built in image optimization

[GalacticHypernova]

Description

For elements like UAvatar that use images, it would be a good idea to integrate with Nuxt Image for those who have it installed to benefit from image optimizations like setting image format, applying modifiers, and all the other features that Nuxt Image offers.

Additional context

No response

[benjamincanac]

Duplicate #1577.

You can already do this using the as prop of the Avatar component:

<script setup>
const NuxtImg = resolveComponent('NuxtImg')
</script>

<template>
  <UAvatar src="https://github.com/benjamincanac.png" :as="NuxtImg" />
</template>

[GalacticHypernova]

@benjamincanac My apologies if it seemed as a duplicate, my suggestion was more so meant for automatic detection and usage of NuxtImg, not just plain capability (hence why I suggested integration as opposed to support). It would be a nice DX improvement in my opinion as it would simplify pages with a lot of avatars/other image elements.

[benjamincanac]

@GalacticHypernova Indeed, we could automatically use <NuxtImg> if installed. We can't do it yet in v3 because of nuxt/ui#2141, we'll have to wait for a fix in Radix Vue first.