Javascript set img src

javascript image src
John picture John · Aug 5, 2009 · Viewed 361.5k times · Source

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

Richard picture Richard · Aug 5, 2009

You should be setting the src using this:

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

or

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

Related questions

Programmatically change the src of an img tag

How can I change the src attribute of an img tag using javascript? <img src="../template/edit.png" name=edit-save/> at first I have a default src which is "../template/edit.png" and I wanted to change it …

Read More
Change image source with JavaScript

So I'm new with JavaScript (this is actually my first attempt to make something work) and I'm having a bit of trouble. I thought I had enough knowledge to make this work, I've even googled for tutorials and scripts that …

Read More
Javascript : get <img> src and set as variable?

If the img below is present <img id="youtubeimg" src="http://i1.ytimg.com/vi/VK4ah66jBvE/0.jpg"/> and the script is <script> var youtubeimgsrc = "something here" document.write(''+youtubeimgsrc+'') </script> …

Read More