avatarImage.tsx

import { useCallback, useEffect, useState } from 'react';

function testImageUrl(url: string): Promise<string> {
	return new Promise(function (resolve, reject) {
		var image = new Image();
		image.src = url;
		image.addEventListener('load', () => resolve(url));
		image.addEventListener('error', reject);
	});
}

const DisplayImage = ({ url }: { url: string }) => {
	const [actualUrl, setActualUrl] = useState<string | null>(null);
	const [loading, setLoading] = useState(false);

	const handleImage = useCallback(async () => {
		try {
			setLoading(true);
			const _actualUrl = await testImageUrl(url);
			setActualUrl(_actualUrl);
		} catch (error) {
			setActualUrl(null);
		}
		setLoading(false);
	}, [url]);

	useEffect(() => {
		handleImage();
	}, [handleImage]);

	return loading ? (
		'Loading...'
	) : actualUrl === null ? (
		'Nullishonking'
	) : (
		<img src={actualUrl} alt='' />
	);
};

avatarImage2.tsx

import NextImage, { StaticImageData } from "next/image";
import { useCallback, useEffect, useState } from "react";

async function testImageUrl(
  url: string | StaticImageData
): Promise<string | StaticImageData> {
  if (typeof url !== "string") return url;

  return new Promise(function (resolve, reject) {
    var image = new Image();
    image.src = url;
    image.addEventListener("load", () => resolve(url));
    image.addEventListener("error", reject);
  });
}

function getInitials(fullName: string) {
  const [firstName = "", lastName = ""] = fullName.split(" ");
  return `${firstName.slice(0, 1)}${lastName.slice(0, 1)}`;
}

const Avatar = ({
  name,
  src,
}: {
  name: string;
  src: string | StaticImageData;
}) => {
  const [actualUrl, setActualUrl] = useState<string | StaticImageData | null>(
    null
  );
  const [loading, setLoading] = useState(false);

  const handleImage = useCallback(async () => {
    try {
      setLoading(true);
      const _actualUrl = await testImageUrl(src);
      setActualUrl(_actualUrl);
    } catch (error) {
      setActualUrl(null);
    }
    setLoading(false);
  }, [src]);

  useEffect(() => {
    handleImage();
  }, [handleImage]);

  return loading ? (
    "..."
  ) : actualUrl === null ? (
    getInitials(name)
  ) : (
    <NextImage src={actualUrl} alt="" />
  );
};

export default Avatar;