Javascript 阻止从脚本加载图像

我对一些图像标签有点小问题。我们有一个返回大量HTML的服务（遗留）。此处的图像标记在其HTML中包含相对路径，这是相对于错误的基的。对我来说，解决这个问题非常简单——只需将它放在一个div中，选择图像，然后修改它们的URL

问题是，一旦您将HTML放入div，浏览器就会请求错误的URL。因此，尽管将图像放入div的全部目的是为了纠正问题，但控制台还是为图像发出了404个警告

我已经看到，可以使用noscript标记阻止图像加载。不幸的是，当用noscript替换div时，我们遇到了一个相当大的问题——从脚本中操作noscript标记似乎非常困难。本机函数（在Chrome中）似乎返回完全不同的结果。例如，当我们试图设置noscript的内部HTML时，似乎认为我们实际上是想将该HTML设置为文本

如何防止图像标签在我修复它们之前加载它们的URL

---

编辑：我从AJAX请求中将HTML作为字符串返回。

这可能/可能无法解决您的特定问题，因为我没有任何代码可供评估。此方法已在Chrome/Edge/FF上成功测试（无控制台错误）

根据使用AJAX的编辑，使用脚本添加html字符串：

var el = document.createElement("DIV");
el.innerHTML = '<img src="wrong_path.jpg" />';
var imgs = el.getElementsByTagName("IMG");
imgs[0].src = "http://placehold.it/350x150";
document.body.appendChild(el);

---

这可能/可能无法解决您的特殊问题，因为我没有任何代码可供评估。此方法已在Chrome/Edge/FF上成功测试（无控制台错误）

根据使用AJAX的编辑，使用脚本添加html字符串：

var el = document.createElement("DIV");
el.innerHTML = '<img src="wrong_path.jpg" />';
var imgs = el.getElementsByTagName("IMG");
imgs[0].src = "http://placehold.it/350x150";
document.body.appendChild(el);

---

你是如何将HTML放入div的？在服务器端动态生成HTML？AJAX然后JS插入？在这两种情况下，是什么阻止您在插入HTML之前对其进行操作？@Shilly我认为这不对-我见过浏览器只通过创建

图像

对象并设置其

src

属性而不向DOM添加任何内容来触发加载。事实上，这就是大多数“图像预加载”脚本背后的全部前提。哦，刚刚在控制台中测试了它，你是对的。创建和图像标记并使用setAttribute更改src将自动下载src，我还不知道，谢谢！我将删除我的答复。编辑：猜测一种解决方法是将html作为文本/纯文本下载并处理字符串。@Amadan:什么都没有。问题是，你不需要插入它来触发404，只要它是任何类型的元素，你就可以得到404。将HTML作为原始字符串进行操作并不特别简单。我可以这样做，但你真的建议我用JavaScript实现一个HTML解析器吗？你是如何将HTML放入div的？在服务器端动态生成HTML？AJAX然后JS插入？在这两种情况下，是什么阻止您在插入HTML之前对其进行操作？@Shilly我认为这不对-我见过浏览器只通过创建

图像

对象并设置其

src

属性而不向DOM添加任何内容来触发加载。事实上，这就是大多数“图像预加载”脚本背后的全部前提。哦，刚刚在控制台中测试了它，你是对的。创建和图像标记并使用setAttribute更改src将自动下载src，我还不知道，谢谢！我将删除我的答复。编辑：猜测一种解决方法是将html作为文本/纯文本下载并处理字符串。@Amadan:什么都没有。问题是，你不需要插入它来触发404，只要它是任何类型的元素，你就可以得到404。将HTML作为原始字符串进行操作并不是特别简单，我可以做到，但你真的建议我用JavaScript实现一个HTML解析器吗？

window.addEventListener("error", function(e) {
    if ( e && e.target && e.target.nodeName && e.target.nodeName.toLowerCase() == "img" ) {
        // Bad image src
        // e.target.src = "Do an url replacement";
    }
}, true);