Due to the company's business needs, the web page produced by Vue needs to be connected to the smart home's wifi. However, this wifi is not connected to the Internet and is only used to connect the mobile phone to the home. In this way, the web page cannot load the images on the server under this kind of wifi.
In this regard, I have come up with 3 solutions for the Vue single page system.
1. Load the image on the previous page first, cache it, and then get it on the subsequent disconnected pages.
2. Make a page with a routing container at the top, place the page after the network is disconnected, and all the pictures that need to be displayed at the bottom. In this way, when the page is loaded, all the pictures will appear, and the sub-routes above can naturally get the pictures.
3. Convert the image into base64 data and save it in localStorage.
Solutions 1 and 2 are relatively simple and perform well on PC and Android platforms. However, it does not display on ios.
(Obviously the pictures are at the bottom, but the ones above are not displayed)
It can be inferred from this that the ios system browser loads images one by one. Before loading each image, it will first sniff whether it is on the server. If it exists and has not changed, it will be displayed in the cache. If it is not found, it will directly give a 404. Therefore, browser-based caching strategies are not ideal when the network is disconnected. , the third option needs to be used. Paste the code first:
/* Get the base64 code of the image* @param {obj}img image dom object* */ function getBase64Image(img) { let canvas = document.createElement(canvas); canvas.width = img.width; canvas.height = img. height; let ctx = canvas.getContext(2d); ctx.drawImage(img, 0, 0, img.width, img.height); //Draw the same image return canvas.toDataURL(image/png); //Convert to base64 data}Using canvas can easily convert images into base64 format. Then just save it in sessionStorage. When you redisplay the image later, just set the src attribute of img to base64 data. What I do in the vue project is to create a component for converting and saving base64, convert all the images in the slot to base64, create a name attribute for the img tag and use it as the key of sessionStorage; then create a component as the display component (Contains only one img tag), set its name attribute to be the same as its corresponding image, and use it as a key to retrieve the base64 data of sessionStorage.
Convert and save components:
<!--Pictures that need to be preloaded--> <save-img-base64> <img src=../../assets/img/connect/bind_xiaofang.png name=bind_xiaofang/> <img src=../ ../assets/img/connect/bind_alonePro.png name=bind_allonePro/> <img src=../../assets/img/connect/bind_S20.png name=bind_S20/> <img src=../../assets/img/connect/bind_S30.png name=bind_S30/> <img src= ../../assets/img/connect/connectStart_xiaofang.png name=connectStart_xiaofang/> <img src=../../assets/img/connect/connectStart_alonePro.png name=connectStart_allonePro/> <img src=../../assets/img/connect/connectStart_S20.png name= connectStart_S20/> <img src=../../assets/img/connect/connectStart_S30.png name=connectStart_S30/> <img src=../../assets/img/connect/reset_xiaofang.png name=reset_xiaofang/> <img src= ../../assets/img/connect/reset_allonePro.png name=reset_allonePro/> <img src=../../assets/img/connect/reset_S20.png name=reset_S20/> <img src=../../assets/img/connect/reset_S30.png name= reset_S30/> <img src=../../assets/img/connect/network_set.png name=network_set/> <img src=../../assets/img/connect/phone_wifi.png name=phone_wifi/> <img src=../../assets/img/connect/tmall.png name= tmall/> </save-img-base64>
Display components:
<img-base64 name=network_set></img-base64>
Browser sessionStorage situation:
As can be seen from the table of Can I use, modern mobile browsers are basically compatible with canvas, and everyone can use it with confidence.
The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.