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

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

要么

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

j-Query存档这个,

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

Answer 3

图像构造函数的实例不应在任何地方使用.你只需设置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
}

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”。