我正在尝试组装和显示已预加载到二维数组中的图像切片，但代码仅显示占位符而不是图像。
图像切片已经预加载了一个 javascript 函数，但是当我使用第二个 javascript 函数来检索和组装图像切片时，我得到的只是占位符而不是图像。第一个预加载图像切片的 javascript 函数在 HTML 页面的头部底部调用，并使用查询字符串检索部分图像文件名 (queryData[2])，第二个 javascript 函数组合图像在 body 标签中，称为 onload=assembleImage();。我在显示图像切片存在的两个函数中都使用了 console.log。为什么我只得到占位符而不是图像？我的代码如下。
// 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;
}
最佳答案
您遇到的主要问题之一是将 preloadImages[r] 分配给 new Image()，而不是 Array .此外，您将 preloadImages 定义为一个函数和一个变量(隐式全局变量)以用于您的二维 Array。重命名这些变量并进行一些清理后，您的代码运行正常，如下所示:
document.addEventListener('DOMContentLoaded', function () {
var queryData = [
'https://makelin.us/100/100',
'https://makelin.us/100/100',
'https://makelin.us/100/100'
];
var preloadImages = [];
// First function to preload image slices into a two dimensional array.
function preloadAllImages() {
var row = 5;
var col = 5;
for (var r = 0; r < row; r++) {
preloadImages[r] = [];
for (var c = 0; c < col; c++) {
preloadImages[r][c] = new Image();
preloadImages[r][c].src = queryData[2];
}
}
// console.log(preloadImages);
}
preloadAllImages();
// 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>";
// console.log(imageTable);
assembleImage.innerHTML = imageTable;
// console.log(assembleImage);
}
assembleImage();
});<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="prodImage"></div>
<script src="script.js">
</script>
</body>
</html>关于javascript - 如何显示预加载在二维数组中而不是占位符的图像切片？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55329594/