Bilder rendern – der bessere Weg

Was ich früher gemacht habe

Rendern Sie ein Bild mit dem img-Element, und wenn src null oder undefiniert ist, rendern Sie ein Fallback-Bild.

import { FC } from "react";

type ImageProps = {
  src: string;
  alt: string;
};

const Image: FC<ImageProps> = ({src, alt}) => {
  return <img alt={alt} src={src || "fallback.jpg"}/>; 
}

Was passiert, wenn ein Bild fehlschlägt

Immer wenn ein Bild nicht geladen werden kann, wird ein onError-Ereignis ausgelöst, wir können dieses Ereignis verwenden, um src auf ein Fallback-Bild zu aktualisieren.

Updates für die Fehlerbehebung

Anstatt direkt eine optionale Bedingung des Fallback-Bildes hinzuzufügen, können wir einen onError-Ereignishandler hinzufügen, um dasselbe zu tun.

useImage-Hook

import { SyntheticEvent, useEffect, useState } from "react";
import { ImageProps } from "./Image";

type ImagePropsGetter = () => ImageProps & {
  onError: (e: SyntheticEvent<HTMLImageElement>) => void;
};

const useImage = ({
  src: srcFromProps,
  alt
}: ImageProps): { getImageProps: ImagePropsGetter } => {
  const [src, setSrc] = useState(srcFromProps);

  const onError = () => {
    setSrc("fallback.jpg");
  };

  useEffect(() => {
    setSrc(srcFromProps);
  }, [srcFromProps]);

  const getImageProps: ImagePropsGetter = () => {
    return { src, alt, onError };
  };

  return { getImageProps };
};

export default useImage;

import { FC } from "react";
import useImage from "./useImage";

export type ImageProps = {
  src: string;
  alt: string;
};

const Image: FC<ImageProps> = (props) => {
  const { getImageProps } = useImage(props);

  return <img {...getImageProps()} />;
};

export default Image;

Externe Links

• Welche anderen Möglichkeiten gibt es, dass ein Bild nicht geladen werden kann?
• Warum habe ich den Status in einem Hook statt in der Image-Komponente behandelt?