WEBWordPress

Как справиться с загрузкой изображений, которые могут не существовать и вызывать ошибку загрузки?

В случае если изображение вдруг стало иметь битую ссылку, в итоге когда вы пытаетесь доставить эти изображения в свои приложения, пользователи в видят разбитое изображение, как показано ниже.

Пример страницы с разбитыми изображениями, как при отображении в браузере Google Chrome

Определенно, это не то, что вы хотели бы видеть в своем приложении. Есть несколько способов, как вы можете исправить эту проблему, чтобы поддерживать хорошие стандарты UX вашего приложения.

1. Периодическая очистка данных

Если изображение не существует, его следует удалить из базы данных.

URL изображения, который является неправильным или указывает на изображение, которое больше не существует, скорее всего, является проблемой данных. Поэтому первое, что вы можете сделать, чтобы противостоять проблеме разбитого изображения, – это периодически проверять все изображения на предмет их работоспособности. Вы бы взяли список URL-адресов изображений, которые были добавлены, скажем, на прошлой неделе, и проверили, возможно ли получить эти изображения (при помощи HTTP-ответа 200 OK). Если да, то изображение остается в вашей базе данных, иначе вы можете удалить изображение.

Преимущества – Решает проблему на корневом уровне. Единовременное усилие при написании сценария

Недостатки – длительное время выполнения (почти невозможно) для миллионов изображений, потеря пропускной способности сети и невозможность отловить ошибки в течение времени между двумя последовательными запусками задачи очистки.

2. Обработайте это в вашем приложении

Если изображение не существует, мы можем заменить его новым.

Другой способ решения этой проблемы – прослушивание события ошибки, которое запускается, когда изображение не загружается. В HTML это можно сделать с помощью атрибута onerror тега .

<img src="http://example.com/non-existent-image.jpg" />

Если исходное изображение не загружается, оно заменяется изображением, упомянутым в обработчике атрибута onerror . Аналогичная обработка может быть выполнена и в мобильных приложениях.

Преимущества – Может решать проблемы с данными в режиме реального времени, нет необходимости в периодических проверках

Недостатки – Не работает для изображений, загружаемых в качестве фона (по крайней мере, для веб-сайтов). Проблемы могут продолжаться в более старых версиях вашего веб-сайта или приложения, которые не могут быть обновлены с новым кодом. Разный код для разных платформ.

3. Обработка на вашем сервере изображений

Если изображение не существует, то сервер вообще не должен отправлять ошибку.

Ваш сервер изображений знает, существует ли изображение, и отправляет клиенту код состояния HTTP 404 Not Found. Вместо этого сам сервер может заменить его изображением по умолчанию, исправить код состояния HTTP и затем отправить его в браузер или приложение.

Преимущества – Работает в режиме реального времени без каких-либо периодических проверок. Никакой обработки не требуется для любого приложения или любой версии любого приложения. Работает для всех видов изображений

Недостатки – вам нужно создать сервер, который сможет справиться с этим изменением маршрута для вас. Сложно, если не невозможно, заставить его работать с простыми настройками доставки изображений, такими как хранилище CDN + S3.

4. Обработайте его с помощью стороннего сервера изображений, такого как ImageKit.io

ImageKit.io автоматически обеспечивает обработку несуществующих изображений на стороне сервера. Используя преобразования ImageKit на основе URL, вы можете указать изображение по умолчанию, которое должно быть доставлено, если исходное изображение не существует, с самим исходным URL изображения. Чтобы привести пример:

<!– URL-адрес несуществующего изображения –> <img src="https://ik.imagekit.io/demo/img/non_existent_image.jpg" /> <!– Указание изображения по умолчанию для отображения в URL –> <img src="https://ik.imagekit.io/demo/img/tr:di-medium_cafe_B1iTdD0C.jpg/non_existent_image.jpg" />

Изображение по умолчанию указывается с помощью di-параметра в URL. В этом случае изображение по умолчанию из кафе.

Поставьте изображение по умолчанию, то есть изображение справа, вместо разбитого изображения, то слева.

Будучи преобразованием URL, это дает вам гибкость, позволяющую указать другое изображение по умолчанию для разных типов изображений без необходимости написания кода для обработки ошибок. Вы можете прочитать больше об обработке несуществующих изображений или изображений по умолчанию, используя ImageKit здесь .

Вопросы кеширования изображений в случаях ошибок

Изображения по умолчанию, отправляемые вместо несуществующего изображения, не должны кэшироваться вообще или, если они кэшируются, то продолжительность кэширования должна быть небольшой, предпочтительно несколько часов. Это оставляет возможность для несуществующего изображения быть «исправленным» или сделанным доступным. Когда это происходит, правильное изображение начинает автоматически доставляться пользователям. Однако, если изображение не должно быть исправлено, продолжительность кэша может быть больше.

Соображения по поводу кода ответа в случаях ошибки

Если вы хотите обработать ошибку в вашем приложении, тогда должен быть возвращен запрос изображения с кодом состояния 404 для работы ошибки . Если вы доставляете изображение по умолчанию вместо испорченного изображения с сервера, тогда код ответа может быть 302 временно перемещен (в идеале, чтобы предотвратить кэширование на промежуточных слоях, таких как CDN, но обработка с успехом и обработчиками ошибок в приложении нарушена) или 200 OK (кэширование на промежуточных слоях можно контролировать с помощью заголовков кэширования)

Статья была переведена для блога TechBlog.SDStudio.top

Источник: project-management.com

Связанные записи
WEBWordPress

Как включить метки (теги , tags) на страницах WordPress

WEB

Google Analytics - Что означают источники трафика сайта Direct, Referral, Organic

WEBWordPress

Contact Form 7 в 2 или более столбца (с плагином и без плагина)

WEBWordPress

Redux Framework - Отличное решение для быстрого создания красивых и функциональных плагинов и тем WordPress

Категории сайта

Мои записи