现在，据我了解发生了什么，我可以提供答案

Question

这是我的代码：

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>

在Chrome中我遇到错误：

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

（它不会在IE Edge，IE 11，Firefox 40中引发此错误）

我想解决这个问题，如果我的客户/利益相关者访问该网站，控制台中没有红色......

来自相关问题：

1）Failed to load resource: net::ERR_FILE_NOT_FOUND loading json.js - “此错误表示找不到文件。”

2）Suppress "Failed to load resource: net::ERR_FILE_NOT_FOUND" in Chrome Packaged App - “控制台顶部的过滤器图标，勾选»隐藏网络消息«”

这对我来说不够好。我知道文件不存在 - 我 $。得到'某些远程HTML文件我知道相对路径不起作用。同时更改我的浏览器设置不会改变其他人机器上的行为。

我试过了：

    window.onerror = function(e) {

    };

我想更好地了解正在发生的事情。

Chrome会看到类似于图片的内容，并试图主动加载它？

独立代码示例：

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

请以控制台中没有红色的方式破解它：）

更新

评论中有几个问题所以我认为我们需要建立（爬行动物大脑）我不是一个威胁。然后我们可以确定问题是否正确形成/我是否采取了正确的方法。

这是我正在使用的代码：

        $.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提供包含<li>个节点的HTML，其中包含必需的属性。

我认为最好提出一个孤立的测试用例并关注问题。但是，我很感激你的好奇心，建议和问题，为什么我这样做... （请不要像我现在这样联系HTML时教我关于XSS攻击）

Answer 1

现在，据我了解发生了什么，我可以提供答案

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

如果字符串看起来像是HTML片段，jQuery会尝试按照HTML描述创建新的DOM元素

此处：jQuery parse html without loading images

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

（一些聪明的正则表达式删除图片标签）

这看起来像是一场艰苦的战斗 - 我必须：

通过regexp查找图片
知道哪些是正确的
提取属性

所有这些都不使用便捷解析方法。

仍然不确定为什么错误仅出现在Chrome中 - 请参阅我的评论：When jQuery parsing html - Chrome throwing net::ERR_FILE_NOT_FOUND

Answer 2

为什么会这样？

使用$.parseHTML时，您的所有HTML都会在DOMNodes中使用您的文档进行解析。

所以<img src="animage.png"/> 结果为

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

如何避免此

加载图片时，您无法阻止在控制台中显示错误。

正如您在帖子中所述，图像的所有相对路径都无法正常工作，因此您唯一的解决方案是用空图像替换这些相对路径。

＆＃13;

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

＆＃13;

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

＆＃13;

我不是正则表达式专家，我想它可以改进。

Answer 3

您可以将问题简化为＆＃34;我可以在图像源损坏时抑制404错误吗？＆＃34;

答案是否，你可以附加一个处理程序<img src='...' onerror='' />，但它总是会在404错误后被调用，而且无法避免这种情况。

这正是.parseHTML正在做的事情，在你的情况下，它调用jQuery.buildFragment，它将从给定的字符串创建元素树。它使用innerHTML将元素加载到默认或自定义上下文中。

实现目标的唯一方法是在解析字符串之前检测图像，尝试将其加载到服务器端脚本的请求，该脚本将处理尝试并返回图像或默认图像。

当jQuery解析html时 - Chrome throw net :: ERR_FILE_NOT_FOUND

这是我的代码：

来自相关问题：

我试过了：

我想更好地了解正在发生的事情。

独立代码示例：

更新

3 个答案:

现在，据我了解发生了什么，我可以提供答案