ksa, 🌚
crabkilla, вот правильное решение...
Вариант №1 Одноразовое замещение ломанных картинок после загрузки...
<!DOCTYPE html>
<head></head>
<body>
<p style="color: navy"> There's only picture here...
<br>
<img src="http://ipic.su/img/img7/fs/burger.1537205489.jpg" width="100px" height="100px" />
</p>
<br>
<p id="pic"> This one cannot be displayed. We have to delete it.
<img alt="bad picture">
</p>
<script>
addEventListener("load", function() {
for(const image of document.images) {
if(image.naturalWidth === 0) {
const node = document.createElement("span");
node.textContent = "Now here is a ❄️.";
image.replaceWith(node);
}
}
});
</script>
</body>
</html>
Вариант №2 Живое замещение ломанных картинок ...
<!DOCTYPE html>
<head></head>
<body>
<script>
const observer = new MutationObserver(mutationRecords => {
for(const mutationRecord of mutationRecords) {
if(mutationRecord.type === "childList") {
for(const node of mutationRecord.addedNodes) {
if(node instanceof HTMLImageElement) {
if(!node.hasAttribute("src"))
replaceBrokenImage(node);
else
node.addEventListener("error", ()=> replaceBrokenImage(node));
}
}
}
}
});
observer.observe(document.body, { childList: true, subtree: true });
function replaceBrokenImage(image) {
const node = document.createElement("span");
node.textContent = "Now here is a ❄️.";
image.replaceWith(node);
}
</script>
<p style="color: navy"> There's only picture here...
<br>
<img src="http://ipic.su/img/img7/fs/burger.1537205489.jpg" width="100px" height="100px" />
</p>
<br>
<p id="pic"> This one cannot be displayed. We have to delete it.
<img alt="bad picture">
</p>
</body>
</html>