Replacing image URL text with img tag, image turns into "broken" after few seconds

Question

I'm writing myself a Chrome extension, using Crossrider. It's very simple. It scrapes comments for URLs and replaces them with <img> tags to display the image inline in the comment.

I haven't written in a regex check yet to determine if the URL is pointing to an image, but I have been testing it on a post that has a comment with an image URL.

When the page loads, the image URL is replaced with an <img> tag and the images does display... for a few seconds. Then it turns into a "broken image" icon.

I'm not sure what is happening except that there seem to be two requests for the image, even though my code is only executing once. One of the requests says it's getting 404, but if I click the request in Chrome debug console, it displays the image fine and is the same URL as the request that doesn't get 404.

My code (again I haven't written a regex match to see if the URL points to an image yet):

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