javascript - jQuery append img element with url on src not working in IE and FF - Stack Overflow

admin管理员组

文章数量:1023744

I have an image tag that retrieves the src by an url, like:

<img src="http://localhost:2000/User/GetImage/1" />

That element is generated by jQuery, that is:

this.updateImage  = function() 
{
    console.log("Change me!");
    var context = this;
    var imageSrc = webApiUrl + "User/GetImage/" + this._id;

    $("#ga-application-header .user-info-image").each(function()
    {
        $(this).empty();
        /* First try */$(this).append($("<img title='" + context._firstName + " " + context._lastName + "' />").attr("src", imageSrc));
        /* Second try*/$(this).append("<img title='" + context._firstName + " " + context._lastName + "' src='" + imageSrc + "' />");
    });
}

That lines with ents - first and second try - are the way I've tried the get this achieved.

Now the most important detail. When page is loaded, this function is called and displays the image. This works. But if I call it again(when user change it's picture) the image doesn't shows in IE and FF. Only on Chrome. IE and FF don't even open an image request(on network tab in console) for it. Note that the console.log text "Change Me!" is always called.

I have an image tag that retrieves the src by an url, like:

<img src="http://localhost:2000/User/GetImage/1" />

That element is generated by jQuery, that is:

this.updateImage  = function() 
{
    console.log("Change me!");
    var context = this;
    var imageSrc = webApiUrl + "User/GetImage/" + this._id;

    $("#ga-application-header .user-info-image").each(function()
    {
        $(this).empty();
        /* First try */$(this).append($("<img title='" + context._firstName + " " + context._lastName + "' />").attr("src", imageSrc));
        /* Second try*/$(this).append("<img title='" + context._firstName + " " + context._lastName + "' src='" + imageSrc + "' />");
    });
}

That lines with ents - first and second try - are the way I've tried the get this achieved.

Now the most important detail. When page is loaded, this function is called and displays the image. This works. But if I call it again(when user change it's picture) the image doesn't shows in IE and FF. Only on Chrome. IE and FF don't even open an image request(on network tab in console) for it. Note that the console.log text "Change Me!" is always called.

• javascript
• jquery

Share Improve this question Follow asked May 31, 2013 at 20:28 DontVoteMeDownDontVoteMeDown 21.5k1010 gold badges7272 silver badges113113 bronze badges 8

• 2 It doesn't show any errors or anything? Anywhere? – PitaJ Commented May 31, 2013 at 20:31
• check if the context in both the calls is the same. – Parthik Gosar Commented May 31, 2013 at 20:35
• @ParthikGosar I would say yes. The object, User is unique and global. The calls are always in it. – DontVoteMeDown Commented May 31, 2013 at 20:37
• I wonder if this is a caching issue? What if you append a random query string to the end of the image src url? – RandomWebGuy Commented May 31, 2013 at 20:38
• Just making sure as calling the same function as a event handler changes its context. Could you create a jsfiddle for this...would be more convenient to help out. – Parthik Gosar Commented May 31, 2013 at 20:39

 |  Show 3 more ments

3 Answers 3

Sorted by: Reset to default 3

The issue is caused by the browser caching the image. The fix is to append a random query string to the image source.

First, I tend to use the following pattern as opposed to string concatenation.

var img = $('<img/>').attr('title',context._firstName).attr('src',imageSrc);
$(this).append(img);

Second, inside your this.updateImage, could you console.log/dir(this), I'm guessing your context isn't proper, you may want to do a var that = this, to keep your references in check.

I just ran into the same issue with IE.

This helped me:

Instead of

$form.find( ".classname" ).append( content );

This worked in IE and all other browsers:

$form.find( ".classname" ).html( $form.find( ".classname" ).html() + content );

Hope it helps somebody here...

I have an image tag that retrieves the src by an url, like:

<img src="http://localhost:2000/User/GetImage/1" />

That element is generated by jQuery, that is:

this.updateImage  = function() 
{
    console.log("Change me!");
    var context = this;
    var imageSrc = webApiUrl + "User/GetImage/" + this._id;

    $("#ga-application-header .user-info-image").each(function()
    {
        $(this).empty();
        /* First try */$(this).append($("<img title='" + context._firstName + " " + context._lastName + "' />").attr("src", imageSrc));
        /* Second try*/$(this).append("<img title='" + context._firstName + " " + context._lastName + "' src='" + imageSrc + "' />");
    });
}

That lines with ents - first and second try - are the way I've tried the get this achieved.

Now the most important detail. When page is loaded, this function is called and displays the image. This works. But if I call it again(when user change it's picture) the image doesn't shows in IE and FF. Only on Chrome. IE and FF don't even open an image request(on network tab in console) for it. Note that the console.log text "Change Me!" is always called.

I have an image tag that retrieves the src by an url, like:

<img src="http://localhost:2000/User/GetImage/1" />

That element is generated by jQuery, that is:

this.updateImage  = function() 
{
    console.log("Change me!");
    var context = this;
    var imageSrc = webApiUrl + "User/GetImage/" + this._id;

    $("#ga-application-header .user-info-image").each(function()
    {
        $(this).empty();
        /* First try */$(this).append($("<img title='" + context._firstName + " " + context._lastName + "' />").attr("src", imageSrc));
        /* Second try*/$(this).append("<img title='" + context._firstName + " " + context._lastName + "' src='" + imageSrc + "' />");
    });
}

That lines with ents - first and second try - are the way I've tried the get this achieved.

Now the most important detail. When page is loaded, this function is called and displays the image. This works. But if I call it again(when user change it's picture) the image doesn't shows in IE and FF. Only on Chrome. IE and FF don't even open an image request(on network tab in console) for it. Note that the console.log text "Change Me!" is always called.

• javascript
• jquery

Share Improve this question Follow asked May 31, 2013 at 20:28 DontVoteMeDownDontVoteMeDown 21.5k1010 gold badges7272 silver badges113113 bronze badges 8

• 2 It doesn't show any errors or anything? Anywhere? – PitaJ Commented May 31, 2013 at 20:31
• check if the context in both the calls is the same. – Parthik Gosar Commented May 31, 2013 at 20:35
• @ParthikGosar I would say yes. The object, User is unique and global. The calls are always in it. – DontVoteMeDown Commented May 31, 2013 at 20:37
• I wonder if this is a caching issue? What if you append a random query string to the end of the image src url? – RandomWebGuy Commented May 31, 2013 at 20:38
• Just making sure as calling the same function as a event handler changes its context. Could you create a jsfiddle for this...would be more convenient to help out. – Parthik Gosar Commented May 31, 2013 at 20:39

 |  Show 3 more ments

3 Answers 3

Sorted by: Reset to default 3

The issue is caused by the browser caching the image. The fix is to append a random query string to the image source.

First, I tend to use the following pattern as opposed to string concatenation.

var img = $('<img/>').attr('title',context._firstName).attr('src',imageSrc);
$(this).append(img);

Second, inside your this.updateImage, could you console.log/dir(this), I'm guessing your context isn't proper, you may want to do a var that = this, to keep your references in check.

I just ran into the same issue with IE.

This helped me:

Instead of

$form.find( ".classname" ).append( content );

This worked in IE and all other browsers:

$form.find( ".classname" ).html( $form.find( ".classname" ).html() + content );

Hope it helps somebody here...

本文标签： javascriptjQuery append img element with url on src not working in IE and FFStack Overflow