I am facing an issue while trying to put together and showcase image slices that have already been loaded into a two-dimensional array. Instead of displaying the images, all I see are empty placeholders.
The image slices were preloaded using a JavaScript function, but when I attempt to retrieve and compile them with another JavaScript function, the result is just placeholders instead of actual images. The initial JavaScript function for preloading the image slices is invoked at the end of the HTML page's head section and utilizes a query string to fetch a portion of the image file name (queryData[2]). On the other hand, the second JavaScript function responsible for assembling the images is included in the body tag and called upon as onload=assembleImage();. Throughout both functions, I've incorporated console.log statements which confirm that the image slices are indeed present. However, why am I unable to view the actual images and only seeing placeholders? Below is the code snippet:
// First function to preload image slices into a two dimensional array.
function preloadImages(){
preloadImages = [];
var row = 5;
var col = 5;
for (var r = 0; r < row; r++){
preloadImages[r] = new Image();
for (var c = 0; c < col; c++){
preloadImages[r][c] = new Image();
preloadImages[r][c].src = queryData[2] + "_" + (r) + "_" + (c) + ".jpg";
}
}
//console.log(preloadImages[r][c]);
}
// Second function to retrieve and assemble image slices.
function assembleImage(){
var row = 5;
var col = 5;
var assembleImage = document.getElementById("prodImage");
var imageTable = "<table>";
for (var r = 0; r < row; r++){
imageTable += "<tr>";
for (var c = 0; c < col; c++){
imageTable += "<td>";
imageTable += "<img src = " + preloadImages[r][c].src + "/>";
imageTable += "</td>";
console.log(preloadImages[r][c])
}
imageTable += "</tr>";
}
imageTable += "</table>";
assembleImage.innerHTML = imageTable;
}