Как сделать заглушку до загрузки изображения (onLoad)?

Question

[mosikus]

Здравствуйте. На странице нужно использовать 3 разных изображения и сделать для каждой заглушку до загрузки изображения. Способ ниже не работает, а, именно, изображение не отображается, что не так ?

const [isLoading, setLoading] = React.useState(false);
const handleOnLoad = () => {
    setLoading(true);
}

{isLoading === true ? (<img onLoad={handleOnLoad } src="https://i.5sfer.com/post/postImage/thumb-8ipwnn.jpg"/>) : (<div>*Заглушка*</div>)}

*Так*

function App() {
  const [isLoading, setLoading] = React.useState(true);
  const handleOnLoad = () => {
    setLoading(false);
  };

  return (
    <div>
      {isLoading && <div>*Заглушка*</div>}
      <img
        alt="alt"
        onLoad={handleOnLoad}
        src="https://i.5sfer.com/post/postImage/thumb-8ipwnn.jpg"
      />
    </div>
  );
}

работает, но при медленном интернет-соединении заглушка отображается прямо над картинкой, пока она загружается, а я хотел бы отображать заглушку до полной загрузки картинки. Как это сделать ?

Answer 1

[Артем]

1. Проблема конкретно в самой ссылке. По этой ссылке ничего не загружается, потому что ресурс (сайт) не доступен.
2. Нужно обрабатывать кейс, когда картинка не загружается, с помощью onError. Лучше всего будет отображать другую заглушку в этом случае.
3. Можно скрывать картинку стилями, пока она не загрузилась, чтобы твоя заглушка отображалась гарантированно корректно.

Вот пример