由於公司業務需要，vue製作的網頁需要連接智慧家庭的wifi，然而這種wifi是沒有連接網路的，僅用於手機與家居的對接。這樣，就導致了網頁在這種wifi下無法載入伺服器上的圖片。
就此，針對vue單頁系統，我想出來3種方案。
1.在上一頁先載入圖片，快取起來，後面的斷網頁面就能拿到了。
2.做一個頁面，上方是路由容器，放置斷網後的頁面，下方是全部需要顯示的圖片。這樣頁面載入時，圖片就全部出來了，上方的子路由自然能拿到圖片。
3.把圖片轉換成base64資料保存在localStorage。
第1、2種方案比較簡單，在pc和安卓平台上表現良好。然而在ios上卻不顯示。
(明明圖片都在下方了，上面的卻死活不顯示)
由此推測，ios系統類瀏覽器對圖片的載入是一個蘿蔔一個坑的。載入每張圖片前會先嗅探其是否在伺服器上，存在且未改變就是用快取顯示，沒找到就直接404了。因此基於瀏覽器的快取策略在斷網的情況下並不理想。 ，需要使用第三種方案。先貼上程式碼：
/* 取得圖片的base64碼* @param {obj}img圖片dom物件* */ function getBase64Image(img) { let canvas = document.createElement(canvas); canvas.width = img.width; canvas.height = img. height; let ctx = canvas.getContext(2d); ctx.drawImage(img, 0, 0, img.width, img.height); //繪製相同圖片return canvas.toDataURL(image/png); //轉換成base64資料}利用canvas可以很容易實現把圖片轉換成base64格式。之後只要存在sessionStorage裡面就可以了。之後重新顯示圖片時，只要設定img的src屬性為base64資料就可以了。我在vue專案裡面的做法是，創建一個用於轉換和保存base64的元件，把slot裡面的圖片全部轉換成base64，並為img標籤創建name屬性並作為sessionStorage的key；再創建一個組件作為顯示組件（只包含一個img標籤），設定其name屬性和其對應的圖片的一樣，作為key來取出sessionStorage的base64資料就ok了。
轉換和儲存組件：
<!--需要預先載入的圖片--> <save-img-base64> <img src=../../assets/img/connect/bind_xiaofang.png name=bind_xiaofang/> <img src=../ ../assets/img/connect/bind_allonePro.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_allonePro.png name=connectStart_allonePro/> <img src=../../assets/img/connect/connectStart_S20.png ng. 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 srcet_xiaofang.png name=reset_xiaofang/> <img srcang/> ../../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>
顯示組件：
<img-base64 name=network_set></img-base64>
瀏覽器sessionStorage情況：
從Can I use的表格中可以看出，現代手機瀏覽器基本上相容於canvas，大家可以放心使用。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。