Javascript设置img src


95

我可能缺少一些简单的东西,但是当您阅读的所有内容都不起作用时,这很烦人。我的图片在动态生成的页面中可能会重复很多次。因此,显而易见的事情是预加载它,并始终使用该变量作为源。

var searchPic;
function LoadImages() {
    searchPic = new Image(100,100);
    searchPic.src = "XXXX/YYYY/search.png";
    // This is correct and the path is correct
}

然后我使用设置图像

  document["pic1"].src = searchPic;

要么

  $("#pic1").attr("src", searchPic);

然而,像永远不会正确设置在Firebug当我查询图像,我得到[object HTMLImageElement]src图像的

在IE中,我得到:

http://localhost:8080/work/Sandbox/jpmetrix/[object]

Answers:


95

您应该使用以下命令设置src:

document["pic1"].src = searchPic.src;

要么

$("#pic1").attr("src", searchPic.src);

57

使用纯JavaScript创建img代码并add attributes手动执行,

var image = document.createElement("img");
var imageParent = document.getElementById("body");
image.id = "id";
image.className = "class";
image.src = searchPic.src;            // image.src = "IMAGE URL/PATH"
imageParent.appendChild(image);

设置src pic1

document["#pic1"].src = searchPic.src;

或使用getElementById

document.getElementById("pic1").src= searchPic.src;

j-Query将其存档,

$("#pic1").attr("src", searchPic.src);

6
没有#的document.getElementById(“ pic1”)
Gianluca Demarinis '16

6

图像构造函数的实例不能在任何地方使用。您只需设置src,图像就会预加载...就这样,显示结束了。您可以丢弃该对象并继续前进。

document["pic1"].src = "XXXX/YYYY/search.png"; 

这是你应该做的。您仍然可以使用图片构造函数,并在的onload处理程序中执行第二个操作searchPic。这样可以确保在将图像设置src为真实img对象之前先加载图像。

像这样:

function LoadImages() {
    searchPic = new Image();
    searchPic.onload=function () {
        document["pic1"].src = "XXXX/YYYY/search.png";
    }
    searchPic.src = "XXXX/YYYY/search.png"; // This is correct and the path is correct
}

如果在onload()中设置src,则会得到一个无限循环,该循环会锤击服务器,即,当src加载后,它将调用onload。
David Newcomb 2013年

因为加载事件只能触发一次,所以还有其他问题。通过将源设置为同一图像,您无法使其再次启动。
列塔尼

1
没错,还有其他SO文章讨论“ XXXX / YYYY / search.png”是网络摄像头图片或服务器端发生更改时的奇怪缓存问题。他们建议我们将链接更改为“ XXXX / YYYY / search.png?t = <thedate>”。您的解决方案是最好,最干净的,因此我将两者结合在一起,从而对服务器产生了影响。
David Newcomb,

@DavidNewcomb Yikes!这是一个棘手的问题。在这种情况下,我想我会放弃新的Image()部分,而是拥有两个实际的dom图像-就像一个双缓冲区。隐藏image1,隐藏image2。在间隔计时器中:在image1上设置src,在image1.onload中,显示1,隐藏2。间隔触发:在image2上设置src。在image2.onload中,显示2,隐藏1.等待,间隔触发:在image1上设置src。在image1.onload中,显示1,隐藏2,以此类推...
Breton

5

另外,解决此问题的一种方法是使用document.createElement和创建html img并按如下所示设置其属性。

var image = document.createElement("img");
var imageParent = document.getElementById("Id of HTML element to append the img");
image.id = "Id";
image.className = "class";
image.src = searchPic.src;
imageParent.appendChild(image);

备注:一点是,社区的Javascript现在鼓励开发人员使用的文档选择,例如querySelectorgetElementByIdgetElementsByClassName而不是文件[“PIC1”。



1

您不需要构造一个全新的图像... src属性只需要一个字符串值:-)


1
如果该页面是使用javascript动态生成的,则需要在加载页面时下载图像,这样在您第一次创建需要该元素的元素时就不会出现令人讨厌的延迟。这就是创建Image对象的原因。
tvanfosson,2009年

您说得对,我的回答不太准确。我只是想说src属性采用字符串,并且完全忘记了Image预先创建on 的缓存优势。谢谢!
JorenB

0

你需要设置

document["pic1"].src = searchPic.src;

searchPic本身就是您的Image(),您需要阅读设置的src。


0

src属性是一个对象,因为您将src元素设置为在JavaScript中创建的整个图像。

尝试

document["pic1"].src = searchPic.src;

0

哇!当您使用srcsrcsearchPic也必须使用。

document["pic1"].src = searchPic.src

看起来更好


0

如果您使用的是WinJS,则可以更改src这些Utilities功能。

WinJS.Utilities.id("pic1").setAttribute("src", searchPic.src);
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.