Javascript set 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

User · Answer

If you re using WinJS you can change the src through the Utilities functions   WinJS Utilities id  pic1   setAttribute  src   searchPic src

User · Answer

You need to set  document  pic1   src   searchPic src    The searchPic itself is your Image    you need to read the src that you set

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Wow  when you use src then src of searchPic must be used also   document  pic1   src   searchPic src   looks better

User · Answer

You should be setting the src using this   document  pic1   src   searchPic src    or      pic1   attr  src   searchPic src

User · Answer

document  pic1   src   searchPic src   should work

User · Answer

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

[javascript] Javascript set img src

Examples related to javascript

Examples related to image

Examples related to src