Need Help Setting <img> src attribute

PianoMan

I've hit a wall trying to use javascript to write a table with some image tags. I'm looping through an array of image names, then setting their src attribute. The function is creating the tags, but all that displays is the 'missing image' thumbnail. The function is fired via a button. Below is my code. Thanks!

<title>Testing Javascript</title>

function getImages() {

// Declare variables
var allImages, vRow, vCell, vText, vImg;
var vCnt, i, j, x, y;
var vTable = document.createElement("TABLE");
var vTBody = document.createElement("TBODY");

// Insert vBody into vTable
vTable.appendChild(vTBody);

// create an array
var images = new Array();

images[0] = "image1.jpg";
images[1] = "image2.jpg";
images[2] = "image3.jpg";

// count values in the array
vCnt = images.length;

// loop through the array of images and answers
for (i=0; i < vCnt; i++)
{
// create a row
vRow = document.createElement("TR");

// create a TD tag
vCell = document.createElement("TD");

// create IMG element
var image = images\[i\];
vImg = document.createElement("IMG");
vImg.setAttribute("src", "images/" + image);

// insert the img tag into the td tag
vCell.appendChild(vImg);

// insert the cell into the row
vRow.appendChild(vCell);

// insert the row into the table
vTBody.appendChild(vRow);

}

// add the table to the doc
var vTableContainer = document.getElementById("vTableContainer");
vTableContainer.appendChild(vTable);
}
// end updatePage()
</script>
</head>

Javascript and Images

Trying to set the image source with js...

</body>
</html>

Dean Oliver

Hi you can either do it the standard way as it is shown in this article http://reference.sitepoint.com/javascript/Element/setAttribute[^] Or I suggest you rather use the jquery api. it's alot easier for manipulating tags etc; It'll make your life far easier. http://api.jquery.com/attr/[^] Here's an excellent beginner's guide. http://www.shopdev.co.uk/blog/jquery-from-scratch-a-beginners-guide/[^] Hope this all helps.

PianoMan

Dean, Thanks for the reply. I've been working with the jquery api just a bit today, and I really like it. Thanks for the reference!

Mohibur Rashid

I just checked about setAttribute. It seems that only Firefox implemented it properly. JQuery is a very good choice. for your information you can also use imgobject.src='my/image/source.jpg'; //it will do fine :)

Dean Oliver

Please vote if you found my answer useful. thanks :)

twseitex

(1) Please don't use names of collections for private vars so var images = new Array(); better var arArrayOfImagesObjects=new Array(); images is al pre-dfined collection: document.images see http://msdn.microsoft.com/en-us/library/ms537461.aspx (2) To set scr: valueof .src is not same like pure string preload image var imgObjekt1=new Image(); // height and width if you want imgObjekt1.src='whatYouWant.jpg'; // maybe with path vImg = document.createElement("IMG"); // check pionter ! if(vImg!=null) { // append into object (into child of body) // append into collection images automatically // check pointer of appended object, use e.g. var imgAppendedImgObject if(imgAppendedImgObject!=null) {imgAppendedImgObject.src=imgObjekt1.src; // will be (now) rendered in body // don't use setAttribute("src", "images/" + image); } } (3) FIRST optimize your code during edit and THEN check errors at run time. to createElement and appendChild check always pointers != null if you use a collection like images check too declare vars inside of function --> local vars declare vars inside of for{} --> declare 1 time outside of for and use inside declare constants like "image1.jpg" outside of function --> use global code e.g. at begin of js-file (easy find and edit in js-file).