Debido a las necesidades comerciales de la empresa, la página web producida por Vue debe estar conectada al wifi de la casa inteligente. Sin embargo, este wifi no está conectado a Internet y solo se utiliza para conectar el teléfono móvil a la casa. De esta forma, la página web no puede cargar las imágenes en el servidor bajo este tipo de wifi.
En este sentido, se me ocurrieron 3 soluciones para el sistema de página única Vue.
1. Primero cargue la imagen en la página anterior, guárdela en caché y luego consígala en las páginas desconectadas posteriores.
2. Cree una página con un contenedor de enrutamiento en la parte superior, coloque la página después de desconectar la red y todas las imágenes que deben mostrarse en la parte inferior. De esta manera, cuando se carga la página, aparecerán todas las imágenes y las subrutas anteriores pueden obtener las imágenes de forma natural.
3. Convierta la imagen a datos base64 y guárdela en localStorage.
Las soluciones 1 y 2 son relativamente simples y funcionan bien en plataformas PC y Android. Sin embargo, no se muestra en ios.
(Obviamente las imágenes están en la parte inferior, pero las de arriba no se muestran)
De esto se puede inferir que el navegador del sistema iOS carga las imágenes una por una. Antes de cargar cada imagen, primero detectará si está en el servidor. Si existe y no ha cambiado, se mostrará en el caché. Si no se encuentra, dará directamente un 404. Por lo tanto, las estrategias de almacenamiento en caché basadas en navegador no son ideales cuando la red está desconectada. , es necesario utilizar la tercera opción. Pegue el código primero:
/* Obtener el código base64 de la imagen* @param {obj}objeto dom de imagen img* */ function getBase64Image(img) { let canvas = document.createElement(canvas.width = img.width; img.altura; dejar ctx = lienzo.getContext(2d); ctx.drawImage(img, 0, 0, img.width, img.height); //Dibujar la misma imagen return canvas.toDataURL(image/png); //Convertir a datos base64}El uso de lienzo puede convertir fácilmente imágenes al formato base64. Luego guárdelo en sessionStorage. Cuando vuelva a mostrar la imagen más tarde, simplemente configure el atributo src de img en datos base64. Lo que hago en el proyecto vue es crear un componente para convertir y guardar base64, convertir todas las imágenes en la ranura a base64, crear un atributo de nombre para la etiqueta img y usarlo como clave de sessionStorage y luego crear un componente como; el componente de visualización (contiene solo una etiqueta img), establezca su atributo de nombre para que sea el mismo que su imagen correspondiente y utilícelo como clave para recuperar los datos base64 de sessionStorage.
Convertir y guardar componentes:
<!--Imágenes que deben cargarse previamente--> <save-img-base64> <img src=../../assets/img/connect/bind_xiaofang.png name=bind_xiaofang/> <img src=.. / ../assets/img/connect/bind_alonePro.png nombre=bind_allonePro/> <img src=../../assets/img/connect/bind_S20.png nombre=bind_S20/> <img src=../../assets/img/connect/bind_S30.png nombre=bind_S30/> <img src= ../../assets/img/connect/connectStart_xiaofang.png nombre=connectStart_xiaofang/> <img src=../../assets/img/connect/connectStart_alonePro.png nombre=connectStart_allonePro/> <img src=../../assets/img/connect/connectStart_S20.png nombre= conectarStart_S20/> <img src=../../assets/img/connect/connectStart_S30.png nombre=connectStart_S30/> <img src=../../assets/img/connect/reset_xiaofang.png nombre=reset_xiaofang/> <img src= ../../assets/img/connect/reset_allonePro.png nombre=reset_allonePro/> <img src=../../assets/img/connect/reset_S20.png nombre=reset_S20/> <img src=../../assets/img/connect/reset_S30.png nombre= reset_S30/> <img src=../../assets/img/connect/network_set.png nombre=network_set/> <img src=../../assets/img/connect/phone_wifi.png nombre=phone_wifi/> <img src=../../assets/img/connect/tmall.png nombre= tmall/> </save-img-base64>
Componentes de la pantalla:
<img-base64 nombre=network_set></img-base64>
Sesión del navegador Situación de almacenamiento:
Como se puede ver en la tabla ¿Puedo usarlo? Los navegadores móviles modernos son básicamente compatibles con Canvas y todos pueden usarlo con confianza.
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.