检查聚合物框架中是否存在资源

Question

我正在尝试在 dom-repeat 模板中引入产品图片，但由于 console.log 中缺少资源而收到 404 错误。我想清理更多合法错误的日志。

<template is="dom-repeat" items="" index-as="index">
  <lazy-image class="center"
    placeholder="/images/placeholder.png"
    src="https://www.images.com/[[formatImg(item.id)]].png"
    style="width: 24pt; height: 24pt;">
  </lazy-image>       
</template>

...

formatImg(id) {
  if(typeof id != 'null') return id.replace(' ', '%20');
}

我看过一些关于 on-error 事件的文档，但没有看到将它们实施到 Polymer 框架中的直接途径。

有没有办法处理这些 GET 请求，使它们不被记录？

Answer 1

简答：

遗憾的是，没有。

这不是 "can't do it in Polymer" 的事情。在撰写本文时，从开发人员的角度来看，根本不可能通过处理 404 来防止控制台错误。

更长的答案：

AFAICT 网络开发人员无法阻止 404 被浏览器记录为错误。如果询问浏览器 "get this thing please" 甚至 "hey can you check if this is a thing?" 而答案是 "that's not a thing"，则由浏览器决定如何处理该信息。现在，它的作用（好吧，Chrome 无论如何——我还没有研究其他人的作用）是 "log an error to the console"。总是。不管怎样。

您（作为最终用户）可以在浏览器中关闭该行为。但是您不能（作为开发人员）"catch" 错误并处理它以使浏览器满意。即使您确实处理了错误并为浏览器提供了一些存在的东西而不是导致 404 的资源，它仍然会作为错误记录在控制台中：

<!-- STILL CAUSES A 404 ERROR TO BE LOGGED TO THE CONSOLE -->
<img id="myimg" src="imagethatdoesntexist.gif" onerror="this.onerror=null;this.src='imagethatexists.gif';">

来源：反复试验 && 此线程 https://bugs.chromium.org/p/chromium/issues/detail?id=124534#c17

检查聚合物框架中是否存在资源

Check if Resource Exists in Polymer Framework

image

polymer

dom-repeat