How to use Avatar with NextJS Images

[quangnmwork]

Hi ,I am currently using Ark UI component.

When I try to configure Image with Ark.UI's Avatar.Image it doesn't work. It can't display the image of Image Nextjs.

Reproduced code:

import { Avatar } from '@ark-ui/react/avatar';
import Image from 'next/image';

export default function Page() {
  return (
    <Avatar.Root>
      <Avatar.Fallback>PA</Avatar.Fallback>
      <Avatar.Image src="https://i.pravatar.cc/300" alt="avatar" asChild>
        <Image
          src={'https://i.pravatar.cc/300'}
          alt={'hi'}
          width={80}
          height={80}
          style={{ width: '80px', height: '80px' }}
        />
      </Avatar.Image>
    </Avatar.Root>
  );
}

Is my usage correct or not. Or can anyone show me how to use it with Nextjs Image.

Link repo https://stackblitz.com/edit/stackblitz-starters-8posta?file=app%2Ftest%2Fpage.tsx,app%2Flayout.tsx,next.config.js

[segunadebayo]

Here's an example of how to make it work:

'use client';
import { Avatar, useAvatarContext } from '@ark-ui/react/avatar';
import Image, { ImageProps } from 'next/image';

const AvatarNextImage = (props: ImageProps) => {
  const avatar = useAvatarContext();
  const { hidden, ...imageProps } = avatar.getImageProps() as ImageProps;
  return (
    <Image
      {...imageProps}
      {...props}
      style={{
        ...props.style,
        visibility: hidden ? 'hidden' : 'visible',
        objectFit: 'cover',
      }}
    />
  );
};

export default function Page() {
  return (
    <div>
      <Avatar.Root
        style={{
          position: 'relative',
          ['--size' as string]: '80px',
        }}
      >
        <Avatar.Fallback
          style={{
            position: 'absolute',
            inset: '0',
            borderRadius: '9999px',
            width: 'var(--size)',
            height: 'var(--size)',
            background: 'gray',
            display: 'grid',
            placeItems: 'center',
          }}
        >
          PA
        </Avatar.Fallback>
        <AvatarNextImage
          src="https://picsum.photos/id/237/200/300"
          alt="hi"
          width={80}
          height={80}
          style={{
            position: 'absolute',
            inset: '0',
            borderRadius: '9999px',
            width: 'var(--size)',
            height: 'var(--size)',
          }}
        />
      </Avatar.Root>
    </div>
  );
}

[mulfyx]

Use getImageProps: https://nextjs.org/docs/app/api-reference/components/image#getimageprops

import { Avatar as ArkAvatar } from "@ark-ui/react";
import { clsx } from "clsx";
import {
	getImageProps as getNextImageProps,
	type ImageProps,
	type StaticImageData,
} from "next/image";

import { type AvatarProps } from "./avatar.types";

import * as styles from "./avatar.css";

function getName(firstName: string, lastName?: string) {
	return lastName != null ? `${firstName} ${lastName}` : firstName;
}

function getInitials(firstName: string, lastName?: string) {
	if (lastName == null) {
		return firstName.slice(0, 2).toUpperCase();
	}

	return `${firstName[0]}${lastName[0]}`.toUpperCase();
}

function getImageProps(image: StaticImageData, name: string) {
	const props: ImageProps = {
		src: image,
		alt: name,
	};

	// eslint-disable-next-line @typescript-eslint/no-unused-vars
	const { loading, decoding, style, ...imageProps } =
		getNextImageProps(props).props;

	return imageProps;
}

export function Avatar({ className, firstName, lastName, image }: AvatarProps) {
	const name = getName(firstName, lastName);
	const initials = getInitials(firstName, lastName);

	const imageProps = image != null ? getImageProps(image, name) : null;

	return (
		<ArkAvatar.Root className={clsx(styles.root, className)} title={name}>
			<ArkAvatar.Fallback className={styles.initials}>
				{initials}
			</ArkAvatar.Fallback>
			{imageProps != null && (
				<ArkAvatar.Image
					{...imageProps}
					className={clsx(imageProps.className, styles.image)}
				/>
			)}
		</ArkAvatar.Root>
	);
}