Aufgrund der geschäftlichen Anforderungen des Unternehmens muss die von Vue erstellte Webseite mit dem WLAN des Smart Homes verbunden sein. Dieses WLAN ist jedoch nicht mit dem Internet verbunden und wird nur zur Verbindung des Mobiltelefons mit dem Zuhause verwendet. Auf diese Weise kann die Webseite bei dieser Art von WLAN die Bilder nicht auf den Server laden.
In diesem Zusammenhang habe ich drei Lösungen für das Vue-Einzelseitensystem entwickelt.
1. Laden Sie zuerst das Bild auf der vorherigen Seite, speichern Sie es zwischen und laden Sie es dann auf die nachfolgenden getrennten Seiten herunter.
2. Erstellen Sie eine Seite mit einem Routing-Container oben, platzieren Sie die Seite nach dem Trennen der Netzwerkverbindung und alle Bilder, die angezeigt werden müssen, unten. Auf diese Weise werden beim Laden der Seite alle Bilder angezeigt, und die oben genannten Unterrouten können die Bilder auf natürliche Weise abrufen.
3. Konvertieren Sie das Bild in Base64-Daten und speichern Sie es in localStorage.
Die Lösungen 1 und 2 sind relativ einfach und funktionieren auf PC- und Android-Plattformen gut. Allerdings wird es auf iOS nicht angezeigt.
(Natürlich sind die Bilder unten, aber die oben werden nicht angezeigt)
Daraus lässt sich schließen, dass das Laden von Bildern durch iOS-Systembrowser ein Zuckerbrot und eine Grube ist. Vor dem Laden jedes Bildes wird zunächst geprüft, ob es auf dem Server vorhanden ist und sich nicht geändert hat. Wenn es nicht gefunden wird, wird direkt eine 404 angezeigt. Daher sind browserbasierte Caching-Strategien nicht ideal, wenn das Netzwerk nicht verbunden ist. , muss die dritte Option verwendet werden. Fügen Sie zuerst den Code ein:
/* Den Base64-Code des Bildes abrufen* @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); img.width, img.height); //Das gleiche Bild zeichnen return canvas.toDataURL(image/png); //In Base64-Daten konvertieren}Mit Canvas können Bilder problemlos in das Base64-Format konvertiert werden. Dann speichern Sie es einfach in sessionStorage. Wenn Sie das Bild später erneut anzeigen, setzen Sie einfach das src-Attribut von img auf Base64-Daten. Im Vue-Projekt erstelle ich eine Komponente zum Konvertieren und Speichern von Base64, konvertiere alle Bilder im Slot in Base64, erstelle ein Namensattribut für das IMG-Tag und verwende es als Schlüssel für sessionStorage B. eine Anzeigekomponente (enthält nur ein img-Tag), legen Sie ihr Namensattribut so fest, dass es mit dem entsprechenden Bild übereinstimmt, und verwenden Sie es als Schlüssel zum Abrufen der Base64-Daten von sessionStorage.
Komponenten konvertieren und speichern:
<!--Bilder, die vorab geladen werden müssen--> <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>
Anzeigekomponenten:
<img-base64 name=network_set></img-base64>
BrowsersitzungSpeichersituation:
Wie aus der Tabelle „Kann ich verwenden“ hervorgeht, sind moderne mobile Browser grundsätzlich mit Canvas kompatibel und jeder kann es bedenkenlos verwenden.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.