在 html 错误通知中添加默认图标

Question

我正在使用 HTML5 通知为我的 Web 应用程序创建通知。

我对通知代码使用如下选项：-

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

所有文本、snum 和 cnum 均已定义。

该图标是从服务器检索到的并且工作正常。但是，如果该图标在服务器上不存在 :: 通知图标变为空白。

如果找不到图片，我想添加一个默认图标。

有人可以在没有额外 HTTP 调用的情况下提供帮助吗？

Answer 1

最简单的方法是让服务器端在找不到请求的情况下发送默认值

或者，使用 javascript 预加载所有图像，这样您就可以检测到不存在的图像，然后在显示通知时将它们替换为默认图像 - 但是，这可能会违反您的 "no extra http calls" 条件

Answer 2

您应该在图像元素上使用 Base64 CSS 背景图像，这样如果图像请求失败，您的默认图像将从一开始就存在。这也将处理额外的 HTTP 请求。

例如：

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

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

有关 base64 图像编码及其在 CSS

中的使用的更多信息，请参阅 https://css-tricks.com/data-uris/

在 html 错误通知中添加默认图标

adding default icon in html notifications on error

javascript

html

notifications

web-notifications