如何在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"} />)
);
};任何帮助都将不胜感激。
回答 2
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用户
发布于 2019-11-27 05:28:01
如果您处于离线状态，您可能一开始就无法加载react bundle.js文件，对此您也无能为力。
而且，在这种情况下，我也看不到将它保存在localStorage中的好处。如果大小很重要，浏览器可能无论如何都会缓存它。
如果用户能够加载您的包，您可以直接将b64硬编码为变量存储在您的包中，或者在componentDidMount上启动ajax (使用useEffect，因为您使用钩子)。
const Home = () => {
const [base64Img, setBase64Img] = useState();
const [isOnline, setIsOnline] = useState(true);
const setOnline = () => setIsOnline(true);
const setOffline = () => setIsOnline(false);
useEffect(() => {
initiateB64Retrieval().then((b64) => setBase64Img(b64));
window.addEventListener('online', setOnline);
window.addEventListener('offline', setOffline);
return () => {
window.removeEventListener('online', setOnline);
window.removeEventListener('offline', setOffline);
}
}, [])
...
}删除事件监听器总是很好的做法。请注意，如果使用匿名函数传递事件侦听器，或者使用.bind()为该函数创建另一个引用，则不能删除事件侦听器。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58098779
复制相关文章
相似问题
腾讯云开发者
