When jQuery parsing html - Chrome throwing net::ERR_FILE_NOT_FOUND

Question

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)

Are you loading (and developing) this by having an `.html` file that you just open (doubleclick) in Chrome or are you using a web server to load html and js? — Mjh, Sep 18 '15 at 13:24
Is this just for a test environment? Why are you trying to parse the html of an image tag when you know the file doesn't exist? Why not just comment out that line until you push to a production environment where the file will exist? I don't get what exactly you're trying to achieve here. — Sean Kendle, Sep 18 '15 at 13:24
`$.parseHTML(some_HTML_string)` why this has to be done? if you are going to put this string in the DOM with `.append(),.prepend(), appendChild(), innerHTML, .html()` etc would work. Browser does it efficiently. — Jai, Sep 18 '15 at 13:27
In production I will $.get some remote HTML. And I will parse it. What I want to achieve? Avoid red in console + better understand what is happening. — Mars Robertson, Sep 18 '15 at 13:27
That can be sort out with exception handling. what i meant is if the item is available then load it otherwise put some dummy html for it. — Jai, Sep 18 '15 at 13:29
When you load HTML / JS through a web server (you access your files via URI) then relative paths will relate to the URI. If you just doubleclick the .html file then the relative paths relate to the current path of the .html file (system path). I think you haven't understood my question and I'm 100% sure there actually is no problem here. It's just that your development environment isn't good enough. — Mjh, Sep 18 '15 at 13:30
Previously I was using $("some_HTML_string") to parse HTML, find some
Yeah: exception handling - hence why question - how do I override default exception handlers? I agree - my development environment is not good enough. On the way to hacker festival I've borrowed the new MacBook from Apple Store and I loved the new keyboard. Loading via file:// or local server won't change anything. Relative paths on remote server will still remain relative (unless I'm missing something) — Mars Robertson, Sep 18 '15 at 13:34
You are missing something. Swap to using a web server and you'll see that the problem won't be there. — Mjh, Sep 18 '15 at 13:51
@Mjh - swapped to use server - http://i.imgur.com/xwWzLcv.png :) — Mars Robertson, Sep 18 '15 at 13:59
Great, now you can navigate to `/images/relative` and assert on your own whether the file exists or not. There is no reason why all browsers except Chrome would load something. If that were true, Chrome wouldn't work whatsoever and how would we even have this discussion then? :) — Mjh, Sep 18 '15 at 14:01
```Please avoid extended discussions in comments.``` @Mjh - please refer to my updated question. **I think we need to establish (reptile brain) that I'm not a threat** - I'm not a threat. I want to avoid red stuff in console and better understand why is this happening. Run the code snippet on your own (from ```file://``` or webserver) and tell me how to avoid red: https://gist.github.com/stefek99/3245c09869b04ebfe49a — Mars Robertson, Sep 18 '15 at 14:13

score 2 · Answer 1 · edited May 23 '17 at 10:30

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

score 0 · Answer 2 · answered Sep 18 '15 at 15:21

0

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.

answered Sep 18 '15 at 15:21

Hacketo

4,978
4
19
34

I actually had a look at the docs - 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" - I am still confused why other browsers do not throw an error... (or maybe they throw but I'm unable to find it) – Mars Robertson Sep 18 '15 at 15:29
@MichalStefanow just tested on FF and I got same 404 not found error – Hacketo Sep 18 '15 at 15:31
@MichalStefanow you should see `https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js 200 OK` at least – Hacketo Sep 18 '15 at 15:40
When I go to 'Network' tab I see jquery.min.js and actually it's 304 (not modified)... The point is: no red 404 :/ – Mars Robertson Sep 18 '15 at 15:41

Shlomi Hassid · Answer 3 · 2015-09-18T15:43:34.017

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.