Question

我正在创建一个带弹出窗口的网站。弹出窗口最多可包含12个图像。我正在调用我的图片pizza1.jpg，pizza2.jpg，pizza3.jpg等等。

有没有任何方法可以使用纯JavaScript来显示图像，只有实际上有一个文件的名称我告诉它要查找？

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

Answer 1

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

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

检查它是否有效：

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

Answer 2

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

Answer 3

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

演示

＆＃13;

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);
}

＆＃13;

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

＆＃13;

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

3 个答案: