Karena kebutuhan bisnis perusahaan, halaman web yang diproduksi oleh Vue perlu terhubung ke wifi rumah pintar. Namun wifi ini tidak terhubung ke Internet dan hanya digunakan untuk menghubungkan ponsel ke rumah. Dengan cara ini, halaman web tidak dapat memuat gambar di server dengan jenis wifi ini.
Dalam hal ini, saya telah menemukan 3 solusi untuk sistem satu halaman Vue.
1. Muat gambar di halaman sebelumnya terlebih dahulu, simpan dalam cache, lalu dapatkan di halaman berikutnya yang tidak terhubung.
2. Buatlah halaman dengan wadah perutean di bagian atas, letakkan halaman setelah jaringan terputus, dan semua gambar yang perlu ditampilkan di bagian bawah. Dengan cara ini, ketika halaman dimuat, semua gambar akan muncul, dan sub-rute di atas secara alami dapat mengambil gambar tersebut.
3. Ubah gambar menjadi data base64 dan simpan di Penyimpanan lokal.
Solusi 1 dan 2 relatif sederhana dan bekerja dengan baik pada platform PC dan Android. Namun, itu tidak ditampilkan di iOS.
(Jelas gambarnya ada di bawah, tapi yang di atas tidak ditampilkan)
Dari sini dapat disimpulkan bahwa pemuatan gambar oleh browser sistem iOS adalah sebuah wortel dan sebuah lubang. Sebelum memuat setiap gambar, terlebih dahulu akan diendus apakah ada di server. Jika ada dan tidak berubah, maka akan ditampilkan di cache. Jika tidak ditemukan, maka akan langsung memberikan 404. Oleh karena itu, strategi caching berbasis browser tidak ideal ketika jaringan terputus. , opsi ketiga perlu digunakan. Paste kodenya terlebih dahulu:
/* Dapatkan kode base64 dari gambar* @param {obj}img objek dom gambar* */ function getBase64Image(img) { let canvas = document.createElement(canvas.width = img.canvas.height = img.tinggi; misalkan ctx = kanvas.getContext(2d); img.width, img.height); //Gambar kembali gambar yang sama canvas.toDataURL(gambar/png); //Konversi ke data base64}Menggunakan kanvas dapat dengan mudah mengubah gambar menjadi format base64. Kemudian simpan saja di sessionStorage. Saat Anda menampilkan ulang gambar nanti, cukup atur atribut src dari img ke data base64. Apa yang saya lakukan di proyek vue adalah membuat komponen untuk mengonversi dan menyimpan base64, mengonversi semua gambar di slot ke base64, membuat atribut nama untuk tag img dan menggunakannya sebagai kunci sessionStorage; komponen tampilan (Hanya berisi satu tag img), atur atribut namanya agar sama dengan gambar terkait, dan gunakan sebagai kunci untuk mengambil data base64 dari sessionStorage.
Konversi dan simpan komponen:
<!--Gambar yang perlu dimuat sebelumnya--> <save-img-base64> <img src=../../assets/img/connect/bind_xiaofang.png name=bind_xiaofang/> <img src=.. / ../assets/img/connect/bind_alonePro.png nama=bind_allonePro/> <img src=../../assets/img/connect/bind_S20.png nama=bind_S20/> <img src=../../assets/img/connect/bind_S30.png nama=bind_S30/> <img src= ../../assets/img/connect/connectStart_xiaofang.png nama=connectStart_xiaofang/> <img src=../../assets/img/connect/connectStart_alonePro.png nama=connectStart_allonePro/> <img src=../../assets/img/connect/connectStart_S20.png nama= connectStart_S20/> <img src=../../assets/img/connect/connectStart_S30.png nama=connectStart_S30/> <img src=../../assets/img/connect/reset_xiaofang.png nama=reset_xiaofang/> <img src= ../../assets/img/connect/reset_allonePro.png nama=reset_allonePro/> <img src=../../assets/img/connect/reset_S20.png nama=reset_S20/> <img src=../../assets/img/connect/reset_S30.png nama= reset_S30/> <img src=../../assets/img/connect/network_set.png nama=jaringan_set/> <img src=../../assets/img/connect/phone_wifi.png nama=phone_wifi/> <img src=../../assets/img/connect/tmall.png nama= kecil/> </simpan-img-base64>
Komponen tampilan:
<img-base64 nama=jaringan_set></img-base64>
Situasi penyimpanan sesi browser:
Seperti yang dapat dilihat dari tabel Dapatkah saya menggunakan, browser seluler modern pada dasarnya kompatibel dengan kanvas, dan semua orang dapat menggunakannya dengan percaya diri.
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.