ImgComponent as Image from next.js

[uigywnkiub]

How can I use Image component from next.js as props ImgComponent in User component from nextui?

[wingkwong]

You can do in this way.

avatarProps={{
  ImgComponent: Image,
  imgProps: {
    src: session?.user.image || '',
    width: 40,
    height: 40,
    alt: 'U',
  },
}}

[uigywnkiub]

You can do in this way.

avatarProps={{
  ImgComponent: Image,
  imgProps: {
    src: session?.user.image || '',
    width: 40,
    height: 40,
    alt: 'U',
  },
}}

Photo not appear and img component too. And invalid props from Image from next... Looks like it didn't work, because I tried to use plain img as ImpComponent and it isn’t as img in DOM

[wingkwong]

Can you try the following - putting src and alt outside imgProps.

avatarProps={{
  ImgComponent: NextImage,
  imgProps: {
    width: 40,
    height: 40,
  },
  src: session?.user.image || '',
  alt: "U",
}}

[uigywnkiub]

Can you try the following - putting src and alt outside imgProps.

avatarProps={{
  ImgComponent: NextImage,
  imgProps: {
    width: 40,
    height: 40,
  },
  src: session?.user.image || '',
  alt: "U",
}}

Works, thanks!
In the future, it will be nice to type hints from next.js image for instance. And for instance props like placeholder='blur', not applied...

imgProps: {
          // @ts-ignore
          priority: true,
          quality: 100,
          width: 40,
          height: 40,
        },