如何在聚合物中设置后备图像

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函数将“未捕获的ReferenceError：dothis未定义”写入日志。

Answer 1

$ unset A-B
bash: unset: `A-B': not a valid identifier

可能无法正常工作，因为您正在尝试将onerror="dothis" 的方法绑定到一个普通的HTML事件属性，而该事件属性不知道您的组件的上下文（它会搜索全局标识符）名为PolymerElement}的名称与在本地dothis元素中不可用的Polymer on-*自定义元素属性不同。

出于您的目的，您可以考虑使用Polymer img：iron-image属性

  

可以设置为占位符图像的URL（最好是数据URI，用于即时渲染）

（来自iron-image documentation）。

placeholder

<iron-image preload placeholder="./loading.png"> </iron-image> 可确保占位符图片也显示在preload更改之间以及发生故障时。

Answer 2

我相信会有一个名为error-changed的事件 这将在error属性更改时触发。因此，您可以挂钩并调用一个将src更改为默认图像的函数。 看看iron-image documentation