Question

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

我正在使用以下选项作为通知代码： -

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

定义了所有文本，snum和cnum。

从服务器检索图标并正常工作。但是，如果服务器上没有图标::通知图标变为空白。

如果找不到图像，我想添加默认图标。

如果没有额外的HTTP呼叫，有人可以帮忙解决这个问题吗？

Answer 1

最简单的方法是，如果找不到请求的服务器端，则让服务器端发送默认值

或者，使用javascript预加载所有图像，这样您就可以检测到不存在的图像，然后在显示通知时将其替换为默认图像 - 但是，这可能会违反您的“无额外http调用”条件

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通知中添加默认图标

2 个答案: