在HTML表格单元格（td）中直接嵌入img标签即可显示图片，无需额外封装或JavaScript；关键要求是img必须位于td内部、src路径有效且建议添加alt属性以保障可访问性与错误提示。
TD 里直接放 IMG 标签就能显示图片
只要 <img> 标签写在 <td> 内部，浏览器就会正常渲染图片。不需要额外包裹、不需要 JS 控制，纯 HTML 就够用。
常见错误是把 <img> 放在 <td> 外面，或者漏了 src 属性——这时候控制台会报 Failed to load resource，表格单元格留白。
-
src必须是有效路径（相对路径如"./images/logo.png"，或绝对 URL） - 建议加上
alt属性，既利于可访问性，也能在图片加载失败时显示提示文字 - 如果图片过大撑破表格，优先用 CSS 控制尺寸，而不是依赖
width/height属性（后者易导致失真）
控制图片大小和对齐：用 CSS 而不是 HTML 属性
老写法喜欢在 <img> 上加 width="100"，但这样会让图片强制拉伸、响应式失效，且无法统一管理样式。
更稳妥的方式是给 <td> 或 <img> 加 class，用 CSS 控制：
<td class="img-cell"><img src="avatar.jpg" alt="用户头像"></td>
对应 CSS：
.img-cell img {<br> max-width: 64px;<br> height: auto;<br> vertical-align: middle;<br>}
-
max-width防止图片溢出单元格；height: auto保持宽高比 -
vertical-align: middle解决图片默认基线对齐导致的底部空隙问题 - 避免用
display: block，否则会丢失行内对齐能力，影响文字混排
批量插入图片时注意路径和加载状态
如果表格数据来自 JS 动态生成（比如用 innerHTML 拼接），src 路径拼错是最常见的失败原因：
- 后端返回的是文件名（如
"photo_123.jpg"），前端忘了补路径前缀，结果请求变成/photo_123.jpg而非/uploads/photo_123.jpg - 图片加载慢或失败时，
<td>看起来“空”，但其实<img>已存在——可用onerrorfallback：<img src="x.jpg" onerror="this.src='placeholder.svg'" alt="暂无图片"> - 服务端返回空字符串或
null当作src，浏览器会发起一个无效请求（如GET /），触发 404，还可能干扰监控日志
IE 或旧版 Safari 下的兼容细节
现代浏览器基本没坑，但若需支持 IE11 或 Safari ≤ 13，要注意两个点：
-
<img>在<td>中不设宽高时，IE 可能将高度算成 0，导致看不见图片——加个font-size: 0到<td>可修复 - Safari 对 SVG 作为
src的支持较弱，尤其是内联 SVG 或 data URL，建议优先用 PNG/JPG - 不要依赖
loading="lazy"在表格中做懒加载——多数浏览器会忽略它，且滚动时可能反复触发加载
真正容易被忽略的是：图片加载完成前，<td> 高度由内容决定；一旦图片加载，高度突变可能引发表格重绘、抖动。如果列宽固定且图片尺寸差异大，最好提前用 CSS 设好 min-height 或 height 占位。
