Как «обновить» изображение, после того, как пользователь открыл страницу без интернета?

Question

[mosikus]

Здравствуйте. Допустим, пользователь зашёл на панель с отключенным интернетом - сработало событие onError. Можно ли как-нибудь перезагрузить это изображение ?

const [isLoading1, setLoading1] = React.useState(true);
  const [isError1, setError1] = React.useState(false);
  const handleOnLoad1 = () => {
    setLoading1(false);
    setError1(false);
  };
  const handleOnError1 = () => {
    setLoading1(false);
    setError1(true);
  };

<div>
      {isError1 && <div>*Заглушка*</div>}
      {isLoading1 && <div>*Загрузка*</div>}
      <img
        alt="Флаг"
        onError={handleOnError1}
        src="https://mirpozitiva.ru/uploads/posts/2016-08/medium/1472042492_01.jpg"
        height="100"
        style={{ display: isError1 || isLoading1 ? "none" : "block" }}
        onLoad={handleOnLoad1}
      />
    </div>

*Код*

Answer 1

[Mikhail Osher]

Online and offline events

Comments

[mosikus]

Здравствуйте. Я видел. Но можно ли как то сделать, чтобы, если изображение загрузилось ( isLoading1 === false), то этот детектор не срабатывал и изображение оставалось ?

[Mikhail Osher]

durak22212, так надо код изначально писать так, чтобы загруженные изображения не затрагивались.

[mosikus]

Mikhail Osher, у меня они сейчас загруженные изображения и не затрагиваются . Интернет есть - перешел на панель - изображение загружено. Интернета нету - перешел на панель - заглушка вместо изображения. Вот я не могу понять, как загрузить изображение, если пользователь зашёл на панель без интернета, но, при этом, если он зашёл на панель и выключил интернет, то загруженные не пропадали.

[mosikus]

Mikhail Osher, значит, решение только скрывать, если интернета нет и показывать, если есть?

[Mikhail Osher]

durak22212, я бы по onload попробовал ничего не делать, ибо и так загрузилось. А если onerror выстрелил, то проверить на оффлайн, и тогда ждать события онлайн, при котором перезапросить картинку.
Чтобы 100 раз не подписываться на онлайн/оффлайн, можно через react context api 1 раз это сделать