如何用JavaScript/JQuery将嵌入代码输出的图片URL放入<img src=''>？

当然可以用JavaScript或jQuery实现，下面给你两种具体的实现方式：

jQuery 实现方式 #

如果你的项目已经引入了jQuery，直接用这段代码就行：

// 先选中表格里的目标单元格，这里假设是所有<td>，如果有特定class可以改成$('.img-url-cell')
$('table td').each(function() {
  // 获取单元格里的URL文本，去除首尾空格
  const imgUrl = $(this).text().trim();
  // 简单判断是否为图片格式的URL，避免替换无关内容
  if (imgUrl.match(/\.(jpg|jpeg|png|gif|webp)$/i)) {
    // 把单元格内容替换成<img>标签，样式可以按需调整
    $(this).html(`<img src="${imgUrl}" alt="表格图片" style="max-width: 120px; max-height: 120px;">`);
  }
});

原生JavaScript 实现方式 #

如果不想依赖jQuery，用原生JS也能搞定：

// 选中所有目标单元格，同样可以根据class调整选择器
const targetCells = document.querySelectorAll('table td');
targetCells.forEach(cell => {
  const imgUrl = cell.textContent.trim();
  // 校验图片URL格式
  if (imgUrl.match(/\.(jpg|jpeg|png|gif|webp)$/i)) {
    const imgElement = document.createElement('img');
    imgElement.src = imgUrl;
    imgElement.alt = '表格图片';
    imgElement.style.maxWidth = '120px';
    imgElement.style.maxHeight = '120px';
    // 清空单元格原有内容，插入图片
    cell.innerHTML = '';
    cell.appendChild(imgElement);
  }
});

注意事项 #

• 一定要确保代码在表格生成之后执行，不然找不到单元格。可以把代码放在页面底部，或者用DOMContentLoaded事件包裹：

  // jQuery 版的延迟执行
  $(document).ready(function() {
    // 上面的jQuery代码放这里
  });
  
  // 原生JS版的延迟执行
  document.addEventListener('DOMContentLoaded', function() {
    // 上面的原生JS代码放这里
  });
  

• 如果只有部分单元格是图片URL，可以给这些单元格加个专属class（比如img-url-cell），然后把选择器改成$('.img-url-cell')或document.querySelectorAll('.img-url-cell')，避免误替换其他内容。

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