防止从脚本加载图像

Question

I've got a slight problem with some image tags. We have a service (legacy) that returns a bunch of HTML. The image tags here contain relative paths in their HTML, which is relative to the wrong base. It's simple enough for me to fix this up- just bung it in a div, select the images, and fiddle their URL.

The problem is that as soon as you put that HTML in the div, the browser requests the incorrect URL. So the console jams up with 404 warnings for the images, even though the whole point of putting them in the div is to correct the problem.

I've seen that you can prevent the image from loading with a noscript tag. Unfortunately, when replacing the div with a noscript, we've had a fairly big problem- it seems that manipulating noscript tags from script is, well, very difficult. The native functions (in Chrome) seem to return completely different results. For example, when we try to set the inner HTML of the noscript, it seems to think that we actually meant to set that HTML as the text.

How can I prevent the image tags from loading their URLs until after I have fixed them up?

Edit: I have the HTML back as a string from an AJAX request.

Answer 1

This might/might not solve your particluar issue as I don't have any code to evaluate. This methods have been tested successfully (no console errors) on Chrome/Edge/FF.

Based on your edit where AJAX is used, adding a html string using script:

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

Another way that might could solve it could be a DOM parser, to convert a string to HTML, iterate the images and update their "src" and return a subset of the DOM to be inserted into the existing DOM.

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

If one need to catch an insert to manually inspect the element inserted, DOM node inserts could be used:

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

If one need to catch these generated errors without manually look for them, an error event handler could be used:

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