title: Javascript set img src
body: <p>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. </p>
  
  <pre><code>var searchPic;
  function LoadImages() {
      searchPic = new Image(100,100);
      searchPic.src = "XXXX/YYYY/search.png";
      // This is correct and the path is correct
  }
  </code></pre>
  
  <p>then I set the image using</p>
  
  <pre><code>  document["pic1"].src = searchPic;
  </code></pre>
  
  <p>or</p>
  
  <pre><code>  $("#pic1").attr("src", searchPic);
  </code></pre>
  
  <p>However, the image is never set properly in FireBug when I query the image I get <code>[object HTMLImageElement]</code> as the <code>src</code> of the image</p>
  
  <p>In IE I get:</p>
  
  <pre><code>http://localhost:8080/work/Sandbox/jpmetrix/[object]
  </code></pre>