如果源文件不存在，如何删除图像元素

Question

我正在制作一个带有弹出窗口的网站。弹出窗口中应该最多包含 12 张图像。我将我的图像命名为 pizza1.jpg、pizza2.jpg、pizza3.jpg，等等。

纯 JavaScript 是否有任何方法可以使图像仅在实际存在具有我告诉它要查找的名称的文件时显示？

This Question类似，但所有的答案都很复杂，而且只有中等程度的相关性。

Answer 1

您应该处理 img 元素的 onerror 事件。

Answer 2

您可以使用 onError 事件从弹出窗口中删除对象：

<img src="src" onError="removeElement(this);" />

检查它是否有效：

function removeElement(element) {
     element.remove();
}

Answer 3

您可以创建一个 Image instance 并使用它的 onload 事件来查看它是否已加载。如果是这样，只需将图像附加到任何元素即可。

演示

var imgurls = [
  "https://placekitten.com/g/64/64",
  "https://placekitten.com/g/32/32",
  "https://placekitten.com/g/none/200",
  "https://placekitten.com/g/100/100",
  "https://placekitten.com/g/24/24"
];

imgurls.forEach(function(url){
  let img = new Image();
  img.onload = onImageLoad;
  img.src = url;
});
  
function onImageLoad(){
  document.body.appendChild(this);
}

<div id="container">
  
</div>

如果源文件不存在，如何删除图像元素

How do I delete an image element if it's source file doesn't exist

javascript

image

loading