Javascript设置img src

Question

我可能遗漏了一些简单的东西但是当你读到的所有内容都不起作用时，它会非常烦人。我有可能在动态生成的页面过程中多次复制的图像。因此，显而易见的事情是预加载它并始终使用该变量作为源。

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]

Answer 1

您应该使用以下方法设置src：

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

或

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

Answer 2

用于手动创建 img 标记和 add attributes 的纯JavaScript，

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

---

在 pic1

中设置src

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

或使用getElementById

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

j-Query将其存档，

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

Answer 3

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

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

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

像这样：

img

Answer 4

此外，解决此问题的一种方法是使用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社区现在鼓励开发人员使用文档选择器，例如querySelector，getElementById和getElementsByClassName，而不是文档[“ PIC1" ]。

Answer 5

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

应该有效

Answer 6

您不需要构建一个全新的图像...... src属性只需要一个字符串值： - ）

Answer 7

您需要设置

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

searchPic本身就是你的Image（），你需要读取你设置的src。

Answer 8

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

尝试

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

Answer 9

哇！当您使用src时，必须同时使用src searchPic。

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

看起来更好

Answer 10

如果您使用的是WinJS，则可以通过src功能更改Utilities。

WinJS.Utilities.id("pic1").setAttribute("src", searchPic.src);