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

Posted 2023-02-24

【中文标题】错误时在 html 通知中添加默认图标

【英文标题】：adding default icon in html notifications on error

【发布时间】：2015-07-02 11:29:51

【问题描述】：

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

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

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

定义了所有的文本、snum 和 cnum。

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

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

有人可以在没有额外 HTTP 调用的情况下帮助解决这个问题吗？

【参考方案1】：

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

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

【讨论】：

也许我的语言不优雅，但这是一个答案

我知道我的“有服务器......”可能在哪里混淆了，这听起来像是一个破碎的英语问题，而不是一个糟糕的英语建议：p

谢谢！会调查这个:)

【参考方案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/