Javascript set img src
JavascriptImageSrcJavascript Problem Overview
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]
Javascript Solutions
Solution 1 - Javascript
You should be setting the src using this:
document["pic1"].src = searchPic.src;
or
$("#pic1").attr("src", searchPic.src);
Solution 2 - Javascript
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);
Solution 3 - Javascript
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
}
Solution 4 - Javascript
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"].
Solution 5 - Javascript
document["pic1"].src = searchPic.src
should work
Solution 6 - Javascript
You don't need to construct a whole new image... the src attribute just takes a string value :-)
Solution 7 - Javascript
You need to set
document["pic1"].src = searchPic.src;
The searchPic itself is your Image(), you need to read the src that you set.
Solution 8 - Javascript
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;
Solution 9 - Javascript
Wow! when you use src then src of searchPic must be used also.
document["pic1"].src = searchPic.src
looks better
Solution 10 - Javascript
If you're using WinJS you can change the src through the Utilities functions.
WinJS.Utilities.id("pic1").setAttribute("src", searchPic.src);