Javascript 设置 img src

Question

I am probably missing something simple but it's quite annoying when everything you read doesn't work. I have images which may be duplicated many times over the course of a dynamically generated page. So the obvious thing to do is to preload it and use that one variable as the source all the time.

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

then I set the image using

  document["pic1"].src = searchPic;

or

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

However, the image is never set properly in FireBug when I query the image I get [object HTMLImageElement] as the src of the image

In IE I get:

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

Answer 1

You should be setting the src using this:

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

or

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

Answer 2

Pure JavaScript to Create img tag and add attributes manually ,

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

---

Set src in pic1

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

or with getElementById

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

j-Query to archive this,

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

Answer 3

Instances of the image constructor are not meant to be used anywhere. You simply set the src , and the image preloads...and that's it, show's over. You can discard the object and move on.

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

is what you should be doing. You can still use the image constructor, and perform the second action in the onload handler of your searchPic . This ensures the image is loaded before you set the src on the real img object.

Like so:

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

Also, one way to solve this is to use document.createElement and create your html img and set its attributes like this.

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

REMARK : One point is that Javascript community right now encourages developers to use document selectors such as querySelector , getElementById and getElementsByClassName rather than document["pic1"].

Answer 5

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

应该管用

Answer 6

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

Answer 7

You need to set

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

The searchPic itself is your Image(), you need to read the src that you set.

Answer 8

Your src property is an object because you are setting the src element to be the entire image you created in JavaScript.

Try

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

Answer 9

Wow! when you use src then src of searchPic must be used also.

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

looks better

Answer 10

如果您使用的是WinJS，您可以通过Utilities函数更改src 。

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