直接在中嵌入即可显示缩略图，无需JS或额外容器；最常见不显示原因是src路径无效或文件缺失，导致控制台报错且单元格留白；应使用CSS的max-width和height:auto控制尺寸以保持比例，并用vertical-align:middle消除底部空隙，同时建议添加alt属性并分离data-fullsrc用于后续点击放大。
直接在 <td> 里写 <code><img alt="怎样在表格中展示缩略图_TD标签内部嵌入IMG标签" > 就能显示缩略图，不需要 JS、不用额外容器，但必须控制好尺寸和路径——否则图片会撑破表格、错位或完全不显示。
为什么图片在 <td> 里不显示
<p>最常见原因是 <code>src 路径无效或文件缺失。浏览器控制台会报 Failed to load resource，单元格留白；其次是漏了 alt 属性（虽不影响加载，但可访问性和调试提示全靠它）。
-
src 必须是相对路径（如 "./images/thumb-01.jpg"）或绝对 URL，不能是本地文件系统路径（如 "C:\xxx\img.png"）
- 检查文件名大小写和扩展名是否匹配（
"avatar.PNG" ≠ "avatar.png"）
- 确保图片实际存在于该路径下，且 Web 服务器有读取权限（尤其部署后）
怎么让缩略图统一尺寸又不失真
src 必须是相对路径（如 "./images/thumb-01.jpg"）或绝对 URL，不能是本地文件系统路径（如 "C:\xxx\img.png"）"avatar.PNG" ≠ "avatar.png"）别用 width 和 height HTML 属性硬设——这会拉伸变形，也不响应式。正确做法是用 CSS 控制 max-width 和 height: auto，保持原始宽高比。
- 给
<td> 加 class，比如 <code><td class="thumb-cell"><img src="..." alt="..."></td> - CSS 写成：
.thumb-cell img { max-width: 80px; height: auto; vertical-align: middle; } -
vertical-align: middle是关键：解决图片默认基线对齐导致的底部多余空隙 - 避免
display: block，否则会破坏行内布局，影响同一单元格中文字与图片混排 - 推荐结构：
<img src="thumb.jpg" data-fullsrc="original.jpg" alt="描述"> - JS 绑定 click 事件时读取
dataset.fullsrc，而不是直接用src - 如果缩略图是服务端生成的（如
/api/thumbs/123），确保data-fullsrc指向的是可直接访问的原图地址，而非需鉴权的接口
点击缩略图看原图时要注意什么
如果后续要加点击放大功能，<img alt="怎样在表格中展示缩略图_TD标签内部嵌入IMG标签" > 的 src 值必须指向原图（不是缩略图路径），或者额外存一个 data-fullsrc 属性。否则模态框里弹出来的还是小图。
缩略图的核心就三点：路径准、尺寸稳、语义清。最容易被忽略的是 vertical-align 和 data-fullsrc 的分离设计——前者让表格看起来整齐，后者让后续交互不返工。
