В связи с деловыми потребностями компании веб-страница, созданная Vue, должна быть подключена к Wi-Fi умного дома. Однако этот Wi-Fi не подключен к Интернету и используется только для подключения мобильного телефона к дому. Таким образом, веб-страница не может загружать изображения на сервер при таком Wi-Fi.
В связи с этим я предложил три решения для одностраничной системы Vue.
1. Сначала загрузите изображение на предыдущую страницу, закешируйте его, а затем получите на последующих отключенных страницах.
2. Сделать страницу с контейнером маршрутизации вверху, разместить страницу после отключения сети, а все картинки, которые нужно отображать, внизу. Таким образом, когда страница загружается, появятся все изображения, и указанные выше подмаршруты естественным образом смогут получить изображения.
3. Преобразуйте изображение в данные base64 и сохраните его в localStorage.
Решения 1 и 2 относительно просты и хорошо работают на платформах ПК и Android. Однако на iOS он не отображается.
(Очевидно, что изображения находятся внизу, но те, что выше, не отображаются)
Из этого можно сделать вывод, что браузер системы ios загружает изображения одно за другим. Перед загрузкой каждого изображения оно сначала проверит, есть ли оно на сервере, если оно существует и не изменилось, оно будет отображено в кеше. Если оно не найдено, оно сразу выдаст ошибку 404. Таким образом, стратегии кэширования на основе браузера не идеальны, когда сеть отключена. , необходимо использовать третий вариант. Сначала вставьте код:
/* Получаем код изображения в base64* @param {obj}img image dom object* */ function getBase64Image(img) { let Canvas = document.createElement(canvas); Canvas.width = img.width; высота изображения; пусть ctx = Canvas.getContext(2d); ctx.drawImage(img, 0, 0, img.width, img.height); //Рисуем то же изображение return Canvas.toDataURL(image/png); //Преобразуем в данные base64}Использование холста позволяет легко конвертировать изображения в формат base64. Затем просто сохраните его в sessionStorage. Когда вы позже повторно отобразите изображение, просто установите для атрибута src img значение base64. В проекте vue я создаю компонент для преобразования и сохранения base64, конвертирую все изображения в слоте в base64, создаю атрибут имени для тега img и использую его в качестве ключа sessionStorage, а затем создаю компонент как; компонент отображения (содержит только один тег img), установите его атрибут name таким же, как соответствующее изображение, и используйте его в качестве ключа для получения данных base64 из sessionStorage.
Преобразуйте и сохраните компоненты:
<!--Изображения, которые необходимо предварительно загрузить--> <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>
Компоненты дисплея:
<img-base64 name=network_set></img-base64>
Ситуация с хранилищем сеанса браузера:
Как видно из таблицы «Можно ли использовать», современные мобильные браузеры в основном совместимы с Canvas, и каждый может с уверенностью использовать его.
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.