When jQuery parsing html - Chrome throwing net::ERR_FILE_NOT_FOUND

问题

Here is my code:

var some_HTML_string = "<img src='images/relative/path.jpg'>";
console.log("about to call $.parseHTML");
$.parseHTML(some_HTML_string)
console.log("I've just called $.parseHTML");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

In Chrome I'm getting error:

GET file:///C:/Users/mstefanow/Desktop/images/relative/path.jpg net::ERR_FILE_NOT_FOUND

(it doesn't throw this error in IE Edge, IE 11, Firefox 40)

I want to solve it in a way that if any of my clients / stakeholders visit the website there is no red in console...

---

From related questions:

1) Failed to load resource: net::ERR_FILE_NOT_FOUND loading json.js - "This error means that file was not found."

2) Suppress "Failed to load resource: net::ERR_FILE_NOT_FOUND" in Chrome Packaged App - "filter icon at the top of the console, and tick »Hide network messages«"

It's not good enough for me. I know file is not there - I'm $.get'ing some remote HTML file I know that relative paths are not working. Also changing my browser setting will not change behaviour on other people machines.

---

I tried :

    window.onerror = function(e) {

    };

---

I would like to better understand what is happening.

Chrome sees something that resembles an images and tries to load it pro-actively?

Standalone code sample:

https://gist.github.com/stefek99/3245c09869b04ebfe49a

Please hack it in a way that there is no red in console :)

---

UPDATE:

There were couple questions in the comments so I think we need to establish (reptile brain) that I'm not a threat. Then we can establish whether the question is properly formed / whether I'm doing the right approach.

This is the code I'm using:

        $.get("https://test_server", function(data) {
            var model_names = $(data).find("li").map(function (index, li) {
                return $(li).data("name");
            });

            var output_html = model_names.map(function (index, name) {
                return "<img src='https://test_server/api/preview/" + name + "' data-name='" + name + "'><br>";
            })

            $("#thumbnails").html(Array.prototype.join.call(output_html, "\n"));
        });

https://test_server serves HTML that contains <li> nodes that contain required attributes.

I thought it is better to present an isolated test case and focus on the issue. However I appreciate your curiosity, suggestions and questions why I'm doing this that way... (please don't educate me about XSS attacks when concatenating HTML the way I do this right now)

回答1:

Now as I understand what's going on I can provide an answer

http://api.jquery.com/jQuery/#jQuery2

if the string appears to be an HTML snippet, jQuery attempts to create new DOM elements as described by the HTML

Here: jQuery parse html without loading images

html = html.replace(/<img[^>]*>/g,"");

(some clever regexp to remove image tags)

It looks like an uphill battle - I'd have to:

• find images by regexp
• know which are the right ones
• extract attributes

All that without using convenience parse methods.

---

Still not sure why error appears only in Chrome - see my comment: When jQuery parsing html - Chrome throwing net::ERR_FILE_NOT_FOUND

回答2:

Why this is happening

When using $.parseHTML, all your HTML is parsed in DOMNodes with your document.

So <img src="animage.png"/> result as

var img = document.createElement("img");
img.src = "animage.png"; // start loading image

---

How to avoid this

You can't prevent for showing an error in the console when loading image.

As stated in your post, all relative paths for images can't work so your only solution is to replace these relative paths with an empty image.

var htmlString = '<img class="aclass" src="images/relative/path.jpg" anattribute/>\
<img src="/animage">\
<img class="aclass" src="images/relative/path.jpg" anattribute/>';

htmlString = htmlString.replace(/(img[^>]+src=(?:"|'))([^\/][^'"]+)/g, "$1//:0");
$.parseHTML(htmlString);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

I'm not a Regex expert, I guess it could be improved.

回答3:

You can simplify you question to "Can I suppress an 404 error when an image source is broken?"

The answer is NO, you can attach a handler <img src='...' onerror='' /> but it will always be called after the 404 error and there is no way to avoid that.

That's exactly what the .parseHTML is doing, in your case it calls jQuery.buildFragment which will create the elements tree from the given string. It uses innerHTML for loading the elements into the default or custom context.

The only way to achieve your goal is to detect images before you parse the string, trying to load them with a request to a server side script which will handle the attempt and return the image or a default one.

来源：https://stackoverflow.com/questions/32653124/when-jquery-parsing-html-chrome-throwing-neterr-file-not-found