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文字“改变我！”总是被称为。

Answer 1

首先，我倾向于使用以下模式而不是字符串连接。

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

其次，在你的this.updateImage中，你可以使用console.log / dir（this），我猜你的上下文不合适，你可能想做一个var = this，以保持你的引用

Answer 2

问题是由浏览器缓存图像引起的。修复方法是将随机查询字符串附加到图像源。

Answer 3

我刚刚遇到与IE相同的问题。

这对我有所帮助：

而不是

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

这适用于IE和所有其他浏览器：

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

希望它能帮到这里的人......

jQuery在src上使用url追加img元素，而不是在IE和FF中工作

3 个答案: