Добавление значка по умолчанию в html уведомлениях об ошибках

Я использую уведомления HTML5 для создания уведомлений для моего веб-приложения.

Я использую следующие параметры для кода уведомления:

var options = {
            body: text,
            icon: encodeParams("/photo?num="+snum+"&id="+cnum),
            dir : "auto",
            tag : cnum,
        };

Весь текст, snum и cnum определены.

Значок извлекается с сервера и работает нормально. Однако, если значок не существует на сервере:: значок уведомления становится пустым.

Я хочу добавить значок по умолчанию, если изображение не найдено.

Может ли кто-нибудь помочь с этим без дополнительного HTTP-вызова?

Источник

2 ответа

Решение

Самый простой способ - заставить серверную часть отправлять значения по умолчанию, если запрошенный не найден.

В качестве альтернативы, предварительно загрузите все изображения с помощью javascript, чтобы вы могли обнаружить несуществующие изображения, а затем заменить их на изображения по умолчанию при отображении уведомления - однако это может нарушить ваше условие "без дополнительных вызовов http"

Источник

Вы должны использовать CSS-фоновое изображение Base64 для элемента image, таким образом, если запрос изображения не пройден, ваше изображение по умолчанию будет там с самого начала. Это также позаботится о дополнительном HTTP-запросе.

Например:

img {
   background-image: url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7);
   background-size: contain;
}

<img src="http://placehold.it/100x100/000000">

См. https://css-tricks.com/data-uris/ для получения дополнительной информации о кодировании изображений base64 и его использовании в CSS

Источник
Другие вопросы по тегам