Devido às necessidades de negócio da empresa, a página web produzida pela Vue necessita de estar ligada ao wifi da casa inteligente. No entanto, este wifi não está ligado à Internet e é utilizado apenas para ligar o telemóvel à casa. Desta forma, a página web não consegue carregar as imagens no servidor neste tipo de wifi.
Nesse sentido, criei 3 soluções para o sistema de página única Vue.
1. Carregue a imagem na página anterior primeiro, armazene-a em cache e, em seguida, obtenha-a nas páginas desconectadas subsequentes.
2. Faça uma página com um contêiner de roteamento na parte superior, coloque a página após a desconexão da rede e todas as imagens que precisam ser exibidas na parte inferior. Desta forma, ao carregar a página, todas as imagens aparecerão, e as subrotas acima poderão obter as imagens naturalmente.
3. Converta a imagem em dados base64 e salve-a em localStorage.
As soluções 1 e 2 são relativamente simples e funcionam bem nas plataformas PC e Android. No entanto, ele não é exibido no iOS.
(Obviamente as fotos estão abaixo, mas as acima não são exibidas)
Pode-se inferir disso que o navegador do sistema ios carrega as imagens uma por uma. Antes de carregar cada imagem, ele primeiro detectará se ela está no servidor. Se existir e não tiver sido alterada, será exibida no cache. Se não for encontrada, fornecerá um 404 diretamente. Portanto, estratégias de cache baseadas em navegador não são ideais quando a rede está desconectada. , a terceira opção precisa ser usada. Cole o código primeiro:
/* Obtenha o código base64 da imagem* @param {obj}img image dom object* */ function getBase64Image(img) { let canvas = document.createElement(canvas); altura; deixe ctx = canvas.getContext(2d); img.width, img.height); //Desenha a mesma imagem return canvas.toDataURL(image/png); //Converter para dados base64}O uso do canvas pode converter facilmente imagens no formato base64. Depois é só salvá-lo no sessionStorage. Quando você exibir novamente a imagem posteriormente, basta definir o atributo src de img como dados base64. O que faço no projeto vue é criar um componente para converter e salvar base64, converter todas as imagens do slot para base64, criar um atributo name para a tag img e usá-lo como chave do sessionStorage e depois criar um componente como; o componente de exibição (contém apenas uma tag img), defina seu atributo name para ser igual à imagem correspondente e use-o como uma chave para recuperar os dados base64 do sessionStorage.
Converta e salve componentes:
<!--Imagens que precisam ser pré-carregadas--> <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 nome=connectStart_xiaofang/> <img src=../../assets/img/connect/connectStart_alonePro.png nome=connectStart_allonePro/> <img src=../../assets/img/connect/connectStart_S20.png nome= 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 nome=reset_allonePro/> <img src=../../assets/img/connect/reset_S20.png nome=reset_S20/> <img src=../../assets/img/connect/reset_S30.png nome= 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>
Componentes de exibição:
<img-base64 nome=network_set></img-base64>
Situação de armazenamento de sessão do navegador:
Como pode ser visto na tabela Posso usar, os navegadores móveis modernos são basicamente compatíveis com o canvas e todos podem usá-lo com confiança.
O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.