En raison des besoins commerciaux de l'entreprise, la page Web produite par Vue doit être connectée au wifi de la maison intelligente. Cependant, ce wifi n'est pas connecté à Internet et sert uniquement à connecter le téléphone mobile à la maison. De cette façon, la page Web ne peut pas charger les images sur le serveur sous ce type de wifi.
À cet égard, j'ai proposé 3 solutions pour le système de page unique Vue.
1. Chargez d'abord l'image sur la page précédente, mettez-la en cache, puis récupérez-la sur les pages déconnectées suivantes.
2. Créez une page avec un conteneur de routage en haut, placez la page une fois le réseau déconnecté et toutes les images qui doivent être affichées en bas. De cette façon, lorsque la page est chargée, toutes les images apparaîtront et les sous-itinéraires ci-dessus pourront naturellement obtenir les images.
3. Convertissez l'image en données base64 et enregistrez-la dans localStorage.
Les solutions 1 et 2 sont relativement simples et fonctionnent bien sur les plateformes PC et Android. Cependant, il ne s'affiche pas sur iOS.
(Evidemment les photos sont en bas, mais celles du dessus ne sont pas affichées)
On peut en déduire que le chargement d’images par les navigateurs du système iOS est une carotte et un noyau. Avant de charger chaque image, il détectera d'abord si elle est sur le serveur. Si elle existe et n'a pas changé, elle sera affichée dans le cache. Si elle n'est pas trouvée, elle donnera directement un 404. Par conséquent, les stratégies de mise en cache basées sur le navigateur ne sont pas idéales lorsque le réseau est déconnecté. , la troisième option doit être utilisée. Collez d'abord le code :
/* Récupère le code base64 de l'image* @param {obj}img image dom object* */ function getBase64Image(img) { let canvas = document.createElement(canvas); hauteur img; soit ctx = canvas.getContext(2d); img.width, img.height); //Dessiner la même image return canvas.toDataURL(image/png); //Convertir en données base64}L'utilisation de Canvas peut facilement convertir des images au format base64. Ensuite, enregistrez-le simplement dans sessionStorage. Lorsque vous réafficherez l'image plus tard, définissez simplement l'attribut src de img sur les données base64. Ce que je fais dans le projet vue est de créer un composant pour convertir et enregistrer en base64, de convertir toutes les images de l'emplacement en base64, de créer un attribut de nom pour la balise img et de l'utiliser comme clé de sessionStorage, puis de créer un composant comme ; un composant d'affichage (contient une seule balise img), définissez son attribut name pour qu'il soit identique à son image correspondante et utilisez-le comme clé pour récupérer les données base64 de sessionStorage.
Convertissez et enregistrez les composants :
<!--Images qui doivent être préchargées--> <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 nom=bind_S20/> <img src=../../assets/img/connect/bind_S30.png nom=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>
Composants d'affichage :
<img-base64 name=network_set></img-base64>
Session du navigateurSituation de stockage :
Comme le montre le tableau Puis-je utiliser, les navigateurs mobiles modernes sont fondamentalement compatibles avec Canvas et tout le monde peut l'utiliser en toute confiance.
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.