google-chrome-extension - 用 img 标签替换图片 URL 文本，几秒钟后图片变成“破碎”

Question

我正在使用 Crossrider 为自己编写一个 Chrome 扩展程序。这很简单。它会抓取 URL 的评论并用<img>标签替换它们，以在评论中内嵌显示图像。

我尚未编写正则表达式检查以确定 URL 是否指向图像，但我一直在对带有图像 URL 的评论的帖子进行测试。

当页面加载时，图像 URL 被替换为<img>标签，并且图像确实显示...几秒钟。然后它变成一个“损坏的图像”图标。

我不确定发生了什么，除了似乎有两个图像请求，即使我的代码只执行一次。其中一个请求说它得到了 404，但是如果我在 Chrome 调试控制台中单击该请求，它会很好地显示图像，并且与没有得到 404 的请求的 URL 相同。

我的代码（同样，我还没有编写正则表达式匹配来查看 URL 是否指向图像）：

var $links;

$( '.Mi' ).has('a').each(function(i,e,a) {
    $links = $( e ).children('a');
    if ( $links.length > 0 ) {
        $links.each(function(i,e,a) {
            if ( !$( e ).has('img').length ) {
                $( e ).html( $('<img/>', { src: $(e).attr('href') }) );
            }
        });
    }
});