Question

我的某些图片标签出现了轻微问题。我们有一个返回一堆HTML的服务（遗留）。这里的图像标签包含HTML中的相对路径，这些路径相对于错误的基础。这很简单，我可以解决这个问题 - 只需将它打成一个div，选择图像，然后调整它们的URL。

问题是，只要将该HTML放入div中，浏览器就会请求错误的URL。因此，控制台会对图像进行404警告，即使将它们放入div中的重点是纠正问题。

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

如何阻止图片代码加载其网址，直到我修复它们为止？

编辑：我将HTML作为来自AJAX请求的字符串返回。

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，迭代图像并更新它们的＆＃34; src＆＃34;并返回要插入现有DOM的DOM子集。

Src：here

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

Src：https://developer.mozilla.org/en-US/docs/Web/API/DOMParser

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"/>';

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

Src：https://stackoverflow.com/a/18152595/2827823

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

防止从脚本加载图像

1 个答案: