122

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]
Alexis Wilke
  • 19,179
  • 10
  • 84
  • 156

10 Answers10

116

You should be setting the src using this:

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

or

$("#pic1").attr("src", searchPic.src);
Richard
  • 21,728
  • 13
  • 62
  • 101
75

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);
Josef
  • 23
  • 6
Jaykumar Patel
  • 26,836
  • 12
  • 74
  • 76
7

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
}
SharpC
  • 6,974
  • 4
  • 45
  • 40
Breton
  • 15,401
  • 3
  • 59
  • 76
  • if you set src in onload() you get an infinite loop which hammers the server i.e. when src has been loaded it calls onload. – David Newcomb Jan 25 '13 at 04:18
  • there is something else going wrong since a load event can only fire once. You can't get it to fire again by setting the source to the same image. – Breton Feb 03 '13 at 01:15
  • 1
    You are right, there are other SO articles which talk about weird caching problems when the "XXXX/YYYY/search.png" is a webcam pic or something that changes on the server side. They suggested that we change the link to "XXXX/YYYY/search.png?t=". Your solution was nicest and cleanest so I combined the two and it hammered the server. – David Newcomb Feb 04 '13 at 11:36
  • @DavidNewcomb Yikes! that's a tricky one. In in that case, I think I would ditch the new Image() part, and instead have two actual dom images- like a double buffer. hide image1, hide image2. in an interval timer: set src on image1, and in image1.onload, show 1, hide 2. Interval fires: set src on image2. in image2.onload, show 2, hide 1. wait, interval fires: set src on image1. in image1.onload, show 1, hide 2- etc. etc... – Breton Feb 09 '13 at 09:16
7

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"].

ambodi
  • 6,116
  • 2
  • 32
  • 22
2
document["pic1"].src = searchPic.src

should work

Nir Levy
  • 4,613
  • 2
  • 34
  • 47
1

You don't need to construct a whole new image... the src attribute just takes a string value :-)

JorenB
  • 1,831
  • 2
  • 16
  • 27
  • 1
    If the page is generated dynamically using javascript, you'll want the image downloaded when the page is loaded so you don't get an annoying delay the first time you create an element that needs it. That's the reason for creating the Image object. – tvanfosson Aug 05 '09 at 12:07
  • You're right, I wasn't very precise in my answer. I just meant to say that the src attribute takes a string, and totally forgot about the caching advantage of creating the `Image` on beforehand. Thanks! – JorenB Aug 05 '09 at 12:12
0

You need to set

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

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

Mat Mannion
  • 3,315
  • 2
  • 30
  • 31
0

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;
Cᴏʀʏ
  • 105,112
  • 20
  • 162
  • 194
0

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

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

looks better

SharpC
  • 6,974
  • 4
  • 45
  • 40
Dewfy
  • 23,277
  • 13
  • 73
  • 121
0

If you're using WinJS you can change the src through the Utilities functions.

WinJS.Utilities.id("pic1").setAttribute("src", searchPic.src);
SharpC
  • 6,974
  • 4
  • 45
  • 40
Beanwah
  • 1,290
  • 2
  • 17
  • 28