javascript - 防止从脚本加载图像

Question

我在使用某些图像标签时遇到了一些小问题。我们有一个返回一堆 HTML 的服务(遗留)。此处的图像标签在其 HTML 中包含相对路径，该路径相对于错误的基数。对我来说解决这个问题很简单 - 只需将其放入 div 中，选择图像，然后修改它们的 URL。

问题是，一旦您将该 HTML 放入 div 中，浏览器就会请求错误的 URL。因此，即使将图像放入 div 的目的是为了纠正问题，控制台也会出现图像 404 警告。

我发现您可以使用 noscript 标记来阻止图像加载。不幸的是，当用 noscript 替换 div 时，我们遇到了一个相当大的问题 - 似乎从 script 操作 noscript 标签非常困难。 native 函数(在 Chrome 中)似乎返回完全不同的结果。例如，当我们尝试设置 noscript 的内部 HTML 时，它似乎认为我们实际上打算将该 HTML 设置为文本。

如何防止图像标记加载其 URL，直到我修复它们？

编辑:我从 AJAX 请求中以字符串形式返回了 HTML。

Answer 1

这可能/可能无法解决您的特定问题，因为我没有任何代码可以评估。此方法已在 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);

另一种可能解决这个问题的方法是使用 DOM 解析器，将字符串转换为 HTML，迭代图像并更新其“src”，然后返回要插入到现有 DOM 中的 DOM 子集。

来源:https://developer.mozilla.org/en-US/docs/Web/API/DOMParser

如果需要捕获插入来手动检查插入的元素，可以使用 DOM 节点插入:

来源:https://stackoverflow.com/a/18152595/2827823

document.body.addEventListener("DOMNodeInserted", function (evt) {
    if (evt.target.tagName == "IMG") {        
        evt.target.src = "http://placehold.it/350x150";
    }
});

document.body.innerHTML = '<img id="foo" src="wrong_path_bar.png"/>';

如果需要捕获这些生成的错误而不手动查找它们，可以使用错误事件处理程序:

来源:Alter the prototype of an image tag?

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