如何在Chrome离线时显示图像
如何在Chrome离线时显示图像
提问于 2019-09-25 20:47:32
我尝试在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"} />)
);
};任何帮助都将不胜感激。
Stack Overflow用户
发布于 2019-09-29 21:42:42
诀窍是在用户代理仍有internet连接的情况下加载图像。在呈现<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;当用户代理失去连接时，它会显示一个图像，当连接恢复时，它会再次隐藏它。如果一开始就切断连接，显然不会起作用，但是在这种情况下，用户如何加载您的应用程序?呢？
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58098779
复制相关文章
相似问题
腾讯云开发者
