[Avatar] Support NuxtImg

[maximepvrt]

Description

Currently all images element are <img> and it's possible to replace all with <NuxtImg> (@nuxt/image)

Additional context

No response

[moshetanzer]

Hi @maximepvrt ,

Thanks for this. However, since this is an external module and not related to Nuxt UI, documentation will be left as is 😄 .

[maximepvrt]

@moshetanzer It's still a shame not to be able to use @nuxt/Image for the avatar component, for example. Google PageSpeed advises me to use it, but I can't. It could be an option to enable.

[moshetanzer]

Aha. Interesting we do use img in avatar @benjamincanac thoughts?

[benjamincanac]

Oh didn't think about the Avatar component indeed, this should be possible yes.

[benjamincanac]

I've added an as prop to the UAvatar component so now you can just do:

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

<template>
  <UAvatar :as="NuxtImg" src="https://avatars.githubusercontent.com/u/739984?v=4" />
</template>

[cybandy]

This is so helpful. Can you include it in the documentation @benjamincanac ?

[maximepvrt]

We could activate it automatically with this #1289 (comment)