Image Component

Image

This component provides Image functionality.

Props

• prop1: Description of prop1.
• prop2: Description of prop2.

Usage

import { Image } from './Image';

const props = {};

<Image prop1="value1" prop2="value2" />;

import type {
  DetailedHTMLProps,
  ImgHTMLAttributes,
  Ref,
  SyntheticEvent
} from 'react';
import { forwardRef, useCallback, useEffect, useState } from 'react';

export const Image = forwardRef(function Image(
  {
    onError,
    ...props
  }: DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>,
  ref: Ref<HTMLImageElement>
) {
  const [imageLoadFailed, setImageLoadFailed] = useState(false);

  const handleError = useCallback(
    (e: SyntheticEvent<HTMLImageElement, Event>) => {
      if (imageLoadFailed) {
        return;
      }
      setImageLoadFailed(true);
      if (onError) {
        onError(e);
      }
    },
    [imageLoadFailed, setImageLoadFailed, onError]
  );

  useEffect(() => {
    setImageLoadFailed(false);
  }, [props.src]);

  return (
    <img
      {...props}
      src={imageLoadFailed ? '': props.src}
      onError={handleError}
      alt={props.alt || ''}
      ref={ref}
    />
  );
});