filipenevola/Image.js

## head.html
<head>
  <link rel="preload" href="/images/people-profile-default.png" as="fetch">
</head>

## Image.js
import React, { useState } from 'react';

export const Image = ({ src, srcOnError, ...rest }) => {
  const [srcImg, setSrcImg] = useState(null);

  const onError = () => {
    setSrcImg(srcOnError);
  };

  const cachedSrc = transformUrlForCaching(src);
  if (!srcOnError) {
    return <img src={src} {...rest} />;
  }

  if (srcImg) {
    return <img src={srcImg} {...rest} />;
  }

  return <img src={src} onError={onError} {...rest} />;
};

## PersonImage.js
import React from 'react';

import { Image } from './Image';

const DEFAULT_PROFILE_IMAGE_URL = '/images/people-profile-default.png';

export const PersonImage = ({ profileImageUrl, ...rest }) => (
  <Image src={profileImageUrl} srcOnError={DEFAULT_PROFILE_IMAGE_URL} {...rest} />
);
	<head>
	<link rel="preload" href="/images/people-profile-default.png" as="fetch">
	</head>
	import React, { useState } from 'react';

	export const Image = ({ src, srcOnError, ...rest }) => {
	const [srcImg, setSrcImg] = useState(null);

	const onError = () => {
	setSrcImg(srcOnError);
	};

	const cachedSrc = transformUrlForCaching(src);
	if (!srcOnError) {
	return <img src={src} {...rest} />;
	}

	if (srcImg) {
	return <img src={srcImg} {...rest} />;
	}

	return <img src={src} onError={onError} {...rest} />;
	};
	import React from 'react';

	import { Image } from './Image';

	const DEFAULT_PROFILE_IMAGE_URL = '/images/people-profile-default.png';

	export const PersonImage = ({ profileImageUrl, ...rest }) => (
	<Image src={profileImageUrl} srcOnError={DEFAULT_PROFILE_IMAGE_URL} {...rest} />
	);