Image Safe Loading When src doesnt load.

react-image.js

import React from "react";

function useFallbackImageInSSR(fallbackSrc) {
  const ref = React.useRef(null);
  const onError = React.useCallback(
    event => {
      event.target.src = fallbackSrc;
    },
    [fallbackSrc]
  );
  React.useEffect(() => {
    if (ref && ref.current) {
      const { complete, naturalHeight } = ref.current;
      const errorLoadingImgBeforeHydration = complete && naturalHeight === 0;

      if (errorLoadingImgBeforeHydration) {
        ref.current.src = fallbackSrc;
      }
    }
  }, [fallbackSrc]);

  return {
    ref,
    onError
  };
}

export default function EventImage({ path }) {
  const fallbackImageProps = useFallbackImageInSSR(
    "/static/default.jpeg"
  );

  return (
    <img
      src="/static/image-not-found.jpg"
      alt="Image not Found"
      {...fallbackImageProps}
    />
  );
}