javascript - 如何在 Polymer 中设置后备图像

Question

我正在根据项目数据动态加载图像。然而，并非所有元素都有图像。当滚动浏览 dom-repeat 时，我在 DevTools 中收到很多 404 Not (Found) 错误。

如何设置后备图像？

有没有办法在发送 get 请求之前预取路由以查看其是否有效，这样日志就不会抛出大量错误？

<img id="img" src="[[item.src]]" onerror="dothis">

...

dothis() {
  console.log('do this');
  this.$.id.src = 'path/to/fallback.jpg';
}

这个onerror函数将“Uncaught ReferenceError: dothis is not Defined”写入日志。

Answer 1

onerror="dothis"

可能不起作用，因为您尝试将 PolymerElement 的方法绑定(bind)到普通 HTML 事件属性，该属性不知道组件的上下文(它搜索名为 的全局标识符>dothis)与 Polymer on-* 自定义元素属性发生的情况不同，这些属性在 native img 元素中不可用。

出于您的目的，您可以考虑使用 Polymer 的 iron-image:其 placeholder 属性

can be set to a URL (preferably a data-URI, for instant rendering) for an placeholder image

(来自 iron-image documentation )。

<iron-image
    preload
    placeholder="./loading.png">
</iron-image>

preload 确保在 src 更改之间以及发生故障时也显示占位符图像。