jQuery在src上用url附加img元素在IE和FF中不起作用

Question

我有一個圖像標簽，可以通過網址檢索src，例如：

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

該元素由jQuery生成，即：

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

我嘗試過的方法（第一次和第二次嘗試）就是實現這一目標的方法。

現在最重要的細節。 加載頁面時，將調用此函數並顯示圖像。 這可行。 但是，如果我再次調用它（當用戶更改圖片時），則該圖片不會在IE和FF中顯示。 僅在Chrome上。 IE和FF甚至都沒有為其打開圖像請求（在控制台的“網絡”選項卡上）。 請注意， console.log文本為“ Change Me！”。 總是被調用。

Answer 1

首先，與字符串連接相反，我傾向於使用以下模式。

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

其次，在您的this.updateImage中，您是否可以console.log / dir（this），我猜您的上下文不正確，您可能想要執行一個= this的var來檢查引用。

Answer 2

該問題是由瀏覽器緩存圖像引起的。 解決方法是將隨機查詢字符串附加到圖像源。

Answer 3

我只是遇到了與IE相同的問題。

這對我有幫助：

代替

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

這適用於IE和所有其他瀏覽器：

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

希望它對這里的人有幫助...