如何用JavaScript校验HTML表格中image_file_name存在并在对应单元格展示图片

实现逻辑 #

• 等待页面DOM加载完成后再操作表格元素，避免元素未渲染导致的获取失败
• 逐行遍历表格tbody内的所有数据行，提取image_file_name列的图片路径
• 通过Image对象预加载图片的方式校验文件是否可访问：
  • 加载成功：将图片渲染到同行的Show_image列，可自定义尺寸避免撑破表格
  • 加载失败：在对应列显示提示文本

完整代码示例 #

将以下代码嵌入到HTML页面的<script>标签中即可生效：

document.addEventListener('DOMContentLoaded', function() {
  // 获取表格所有数据行
  const tableRows = document.querySelector('.dataframe tbody').querySelectorAll('tr');
  
  tableRows.forEach(row => {
    // 提取image_file_name列的路径（第二列，索引为1）
    const imgPath = row.children[1].textContent.trim();
    // 获取当前行的Show_image列（最后一列，索引为4）
    const showImgCell = row.children[4];
    
    // 新建Image对象用于预加载校验
    const img = new Image();
    // 图片加载成功回调
    img.onload = function() {
      // 替换单元格内容为图片，可自行调整宽高属性
      showImgCell.innerHTML = `<img src="${imgPath}" width="120" alt="预览图">`;
    };
    // 图片加载失败回调
    img.onerror = function() {
      showImgCell.innerHTML = '*图片不存在*';
    };
    // 触发加载校验
    img.src = imgPath;
  });
});

注意事项 #

• 代码默认按照你提供的表格列顺序匹配单元格，如果后续调整了列顺序，可以自行修改children后的索引值
• 可以根据需求调整img标签的宽高、边距等样式属性，适配页面布局

内容的提问来源于stack exchange，提问作者john div