Как показать изображение, когда Chrome не в сети

Question

Я пытаюсь показать изображение, когда браузер Chrome находится в автономном режиме, а когда он в сети, показать веб-страницу.

Я перенес изображение в данные base64 и попытался загрузить его в тег img, однакоданные base64 слишком велики.

Есть ли способ показать изображение, когда браузер отключен?

import imageToBase64 from "image-to-base64";

const Home = () => {

  const [isOnline, setIsOnline] = useState(true);

  // Checks to see if the browser has internet connection or not
  window.addEventListener("online", () => setIsOnline(true));
  window.addEventListener("offline", () => setIsOnline(false));

 //Link to the image 
 const idleImgUrl = `${window.location.href}${coffeeMachine}`;

//convert image to base64 and save to local storage
  imageToBase64(idleImgUrl)
    .then(res => {
      window.localStorage.setItem("idleImgData", res);
    })
    .catch(err => {
      console.log(err);
    });

  return (
    isOnline 
    ? (<div>The web page to show</div>) 
    :

    // <p> tag shows 
    <p>The browser is offline now</p> 
    // img tag does not show
    (<img src={window.localStorage.getItem("idleImgData"} />)
   );
};

Любая помощь будет признательна ...

Answer 1

Хитрость заключается в том, чтобы загрузить изображение, пока пользовательский агент все еще подключен к Интернету.Изображение не будет загружено, пока вы не отобразите тег <img>.Затем кэшированное изображение может быть отображено без проблем позже.

Я написал короткий create-react-app пример для иллюстрации.

import React, { useState, useEffect, useCallback } from 'react';

const App = () => {
  const [online, setOnline] = useState(true);

  const onlineListener = useCallback(() => setOnline(true), [setOnline]);
  const offlineListener = useCallback(() => setOnline(false), [setOnline]);

  useEffect(() => {
    window.addEventListener('online', onlineListener);
    window.addEventListener('offline', offlineListener);

    return () => {
      window.removeEventListener('online', onlineListener);
      window.removeEventListener('offline', offlineListener);
    };
  }, [onlineListener, offlineListener]);

  return (
    <div className="App">
      <img
        style={online ? { display: 'none' } : undefined}
        src="TODO"
        alt="no internet"
      />
    </div>
  );
};

export default App;

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