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

Когда вы обрабатываете миллионы изображений на своем веб-сайте или в мобильном приложении, вполне возможно, что через некоторое время несколько изображений прекратят свое существование. И когда вы попытаетесь доставить эти изображения в свои приложения, пользователи в конечном итоге видят разбитое изображение, как показано ниже.

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

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

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

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

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

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

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

2. Обработайте отсутствующие изображения на стороне приложения

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

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

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

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

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

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

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

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

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

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

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

ImageKit.io автоматически обеспечивает обработку несуществующих изображений на стороне сервера. Используя преобразования на основе URL-адресов ImageKit, вы можете указать изображение по умолчанию, которое должно быть доставлено, если исходное изображение не существует, с самим исходным 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 (кэширование на промежуточных слоях можно контролировать с помощью заголовков кэширования)

Источник записи: https://techblog.sdstudio.top/blog/kak-spravit-sya-s-zagruzkoy-izobrazheniy-kotorye-mogut-ne-sushhestvovat-i-vyzyvat-oshibku-zagruzki

Источник записи: https://blog.imagekit.io