회사의 업무상 필요로 인해 Vue에서 제작한 웹페이지는 스마트홈의 Wi-Fi에 연결되어야 합니다. 그러나 이 Wi-Fi는 인터넷에 연결되지 않고 휴대폰을 집에 연결하는 데에만 사용됩니다. 이런 방식으로 웹페이지는 이러한 종류의 Wi-Fi 환경에서는 서버의 이미지를 로드할 수 없습니다.
이와 관련하여 저는 Vue 단일 페이지 시스템에 대한 3가지 솔루션을 생각해냈습니다.
1. 먼저 이전 페이지에서 이미지를 로드하고 캐시한 다음 연결이 끊긴 다음 페이지에서 가져옵니다.
2. 상단에 라우팅 컨테이너가 있는 페이지를 만들고, 네트워크 연결이 끊긴 후의 페이지를 배치하고, 하단에 표시해야 할 모든 그림을 배치합니다. 이런 식으로 페이지가 로드되면 모든 사진이 나타나고 위의 하위 경로를 통해 자연스럽게 사진을 얻을 수 있습니다.
3. 이미지를 base64 데이터로 변환하여 localStorage에 저장합니다.
솔루션 1과 2는 비교적 간단하며 PC 및 Android 플랫폼에서 잘 작동합니다. 그러나 iOS에서는 표시되지 않습니다.
(분명히 사진은 하단에 있지만 위의 사진은 표시되지 않습니다)
이를 통해 iOS 시스템 브라우저의 이미지 로딩은 당근과 구덩이임을 추론할 수 있습니다. 각 이미지를 로드하기 전에 먼저 해당 이미지가 서버에 있는지 확인하고, 변경되지 않은 경우에는 캐시에 표시하며, 해당 이미지가 없으면 바로 404를 표시합니다. 따라서 브라우저 기반 캐싱 전략은 네트워크 연결이 끊어진 경우 이상적이지 않습니다. , 세 번째 옵션을 사용해야 합니다. 먼저 코드를 붙여넣으세요.
/* 이미지의 base64 코드 가져오기* @param {obj}img image dom object* */ function getBase64Image(img) { let canvas = document.createElement(canvas); canvas.width = img.width =; img.height; ctx = canvas.getContext(2d); img.width, img.height); //동일한 이미지를 그립니다. return canvas.toDataURL(image/png) //base64 데이터로 변환}캔버스를 사용하면 이미지를 base64 형식으로 쉽게 변환할 수 있습니다. 그런 다음 sessionStorage에 저장하면 됩니다. 나중에 이미지를 다시 표시할 때 img의 src 속성을 base64 데이터로 설정하면 됩니다. vue 프로젝트에서 내가 하는 일은 base64 변환 및 저장을 위한 구성 요소를 만들고, 슬롯의 모든 이미지를 base64로 변환하고, img 태그에 대한 이름 속성을 만들고 이를 sessionStorage의 키로 사용한 다음 다음과 같이 구성 요소를 만드는 것입니다. 디스플레이 구성 요소(img 태그 하나만 포함), name 속성을 해당 이미지와 동일하게 설정하고 이를 키로 사용하여 sessionStorage의 base64 데이터를 검색합니다.
구성요소 변환 및 저장:
<!--미리 로드해야 하는 사진--> <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 이름=bind_S20/> <img src=../../assets/img/connect/bind_S30.png 이름=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 이름= 재설정_S30/> <img src=../../assets/img/connect/network_set.png name=network_set/> <img src=../../assets/img/connect/phone_wifi.png 이름=phone_wifi/> <img src=../../assets/img/connect/tmall.png 이름= tmall/> </save-img-base64>
디스플레이 구성요소:
<img-base64 이름=network_set></img-base64>
브라우저 세션저장 상황:
사용할 수 있나요?의 표에서 볼 수 있듯이 최신 모바일 브라우저는 기본적으로 캔버스와 호환되어 누구나 안심하고 사용할 수 있습니다.
위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.