将图像添加到给定链接的表中答案

【问题标题】：Adding image to table given link将图像添加到给定链接的表中
【发布时间】：2023-03-24 19:09:01
【问题描述】：

我有以下代码贯穿我的行和列

           for (var j=0; j < cols; j++) {
            for (var k=0; k < cols; k++) {
              alert(data[j][i])
              if(data[j][i].endsWith(".jpg"))
              {
                var img = document.createElement('img');
                img.src = data[j][i];
                img.onload = function() { //check to make sure that the 
                  tableData += '<td>' + img + '</td>';
                };
              }
              else
              {
                tableData += '<td>'+data[j][i]+'</td>'; 
              }
              break;
            }
          }

我正在尝试创建图像，但该位置没有弹出任何内容。知道我可能做错了什么吗？我也尝试了没有 .onload 并且弹出 [object HTMLImageElement]

【问题讨论】：

关于该代码的一些事情没有意义。 tableData 是什么？将对img 元素的引用连接到tableData 字符串中是没有意义的。 .onload 函数将在稍后运行，在图像加载后，您的代码不会停止并等待它。
解决了，谢谢

标签： javascript html image html-table

【解决方案1】：

变量img 持有对象，而不是HTML 字符串。改用<img> 标签作为string！
还要注意onload 事件是异步的，回调可以稍后调用！

for (var j = 0; j < cols; j++) {
  for (var k = 0; k < cols; k++) {
    alert(data[j][i])
    if (data[j][i].endsWith(".jpg")) {
      var img = '<img src="' + data[j][i] + '">';
      tableData += '<td>' + img + '</td>';
    } else {
      tableData += '<td>' + data[j][i] + '</td>';
    }
    break;
  }
}

【讨论】：

【解决方案2】：

您在第二个循环中迭代k，但您调用的是data[j][i]。我想你需要打电话

data[j][k]

如果第一个循环遍历列，则第二个循环应该遍历行，除非行和列相等。

for (var k=0; k < rows; k++) {

【讨论】：