隐藏损坏的图像 chrome 扩展

Question

我的问题： 在 jsfiddle 上，我成功地隐藏了损坏的图像图标。但是，当加载到 Chrome 扩展程序上时，它不起作用：/

示例：

一些背景：“post.url”可能是也可能不是图像文件。如果不是，我想隐藏它。我该怎么做？

这是我当前的代码：

$("#art").append('<img id="img" src="' + post.url + '"onerror="this.style.display=\'none\'"/>');

Answer 1

按照 Rahul 和李斯特先生的建议使用它来检查

function checkURL(url) {
    return(url.match(/\.(jpeg|jpg|gif|png)$/) != null);
}

Answer 2

1. 使用正确的开发工具 - 扩展弹出窗口有其自己的单独一个，可通过右键单击弹出窗口，然后单击“检查”来访问（请参阅 this answer 了解各种浏览器）；
2. 在正确的开发工具中，您会看到有关内联 JS 被阻止的错误；
3. 因为extensions can't use inline JS by default（这是个好东西所以不要改变它），
   而是以编程方式附加 onerror 侦听器：

$(`<img id="img" src="${post.url}">`).appendTo('#art').on('error', function() {
  this.style.display = 'none';
});