Shulou(Shulou.com)06/01 Report--

This article editor for you detailed introduction of "html5 mobile web page pictures can not load how to solve", the content is detailed, the steps are clear, the details are handled properly, I hope this "html5 mobile web page pictures can not load how to solve" article can help you solve doubts, the following follow the editor's ideas slowly in-depth, together to learn new knowledge.

Due to the business needs of the company, the web page made by vue needs to be connected to the wifi of the smart home. However, this kind of wifi is not connected to the Internet and is only used for the connection between mobile phone and home. As a result, the web page cannot load pictures on the server under this kind of wifi.

In this regard, for the vue single-page system, I came up with three solutions.

1. Load the picture on the previous page, cache it, and get it on the disconnected page.

two。 Make a page, the top is the routing container, put the disconnected page, below are all the pictures to be displayed. In this way, when the page loads, all the pictures will come out, and the sub-route above will naturally get the picture.

3. Convert the picture into base64 data and save it in localStorage.

The first and second schemes are relatively simple and perform well on pc and Android platforms. However, it does not show up on ios.

From this, it is speculated that the loading of pictures by ios system browsers is a radish and a pit. Before loading each picture will first sniff whether it is on the server, exist and do not change is displayed in the cache, did not find the direct 404. Therefore, the browser-based caching strategy is not ideal in the case of network disconnection. You need to use the third option Paste the code first:

/ * get Base64 code of picture * @ param {obj} img picture 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 picture return canvas.toDataURL ("image/png"); / / convert it to base64 data}

Using canvas, it is easy to convert pictures to base64 format. After that, just save it in sessionStorage. When you redisplay the picture later, just set the src property of img to base64 data. My approach in the vue project is to create a component for converting and saving base64, convert all the pictures in slot into base64, and create a name attribute for the img tag and create a component as the key; of sessionStorage as a display component (containing only an img tag), set its name attribute as the same as its corresponding picture, as a key to extract sessionStorage's base64 data on the ok.

Convert and save components:

Display components:

Read here, this "html5 mobile web page pictures can not load how to solve" article has been introduced, want to master the knowledge of this article also need to practice and use to understand, if you want to know more about the article, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.