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]
You should be setting the src using this:
document["pic1"].src = searchPic.src;
or
$("#pic1").attr("src", searchPic.src);
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);
pic1
document["#pic1"].src = searchPic.src;
or with getElementById
document.getElementById("pic1").src= searchPic.src;
$("#pic1").attr("src", searchPic.src);
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
}
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"].
document["pic1"].src = searchPic.src
应该管用
你不需要构建一个全新的图像...... src 属性只需要一个字符串值 :-)
You need to set
document["pic1"].src = searchPic.src;
The searchPic itself is your Image(), you need to read the src that you set.
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;
Wow! when you use src
then src
of searchPic
must be used also.
document["pic1"].src = searchPic.src
looks better
如果您使用的是WinJS,您可以通过Utilities
函数更改src
。
WinJS.Utilities.id("pic1").setAttribute("src", searchPic.src);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.