直接用 <img> 标签嵌入单元格即可，需确保 src 路径正确、标签闭合规范，并设置 alt 属性；垂直对齐用 vertical-align: middle，尺寸用 CSS 控制；优先选用 <img> 而非背景图以保障可访问性与语义化。
直接用 <img> 标签嵌入单元格就行
HTML 表格单元格（<td> 或 <th>）本身不提供“插入图片”的专用属性，所有图片都靠 <img> 标签实现。只要确保 src 路径正确、标签闭合规范，就能正常显示。
常见错误现象包括：图片不显示、显示为缺失图标、控制台报 404 错误 —— 这些基本都指向路径或标签问题。
-
src值必须是有效路径：相对路径（如"images/logo.png"）需相对于当前 HTML 文件位置；绝对路径（如"/assets/icon.svg"）需以站点根目录为基准 - 务必写
alt属性：不仅利于可访问性，还能在加载失败时显示替代文本 - 不要把
<img>放在<td>外面或嵌套错层（比如<td><img></tr>这类漏闭合/错闭合）
<img> 的尺寸和对齐怎么控制
默认情况下，<img> 是行内元素，会和文字基线对齐，常导致上下留白或错位。表格单元格里尤其明显。
- 加
style="vertical-align: middle;"可快速解决垂直居中问题 - 宽高建议用 CSS 控制：
style="width: 48px; height: auto;"，避免拉伸变形；设height同时不设width容易撑破列宽 - 若需响应式（比如小屏缩放），可用
max-width: 100%; height: auto;，但注意表格本身可能不自动收缩
图片作为背景图 vs. <img> 标签，选哪个
虽然可以用 background-image 给 <td> 设背景图，但绝大多数场景下应优先用 <img> 标签。
立即学习“前端免费学习笔记（深入）”；
-
<img>支持alt、可被屏幕阅读器识别、能触发自然的加载事件（如onload）、SEO 友好 - 背景图无法设置语义化描述，也不参与文档流，不能被右键另存，且在打印时默认不显示（除非显式设
print-backgrounds） - 仅当需要平铺、模糊叠加、或图片纯作装饰且无信息价值时，才考虑
background-image
动态生成表格时图片加载失败怎么办
用 JS 插入表格行后图片没出来？别急着查网络，先看三件事：
- 检查 JS 中拼接的
src字符串是否含多余空格或编码错误（比如中文路径没encodeURIComponent） - 确认图片 URL 在浏览器地址栏中能直接打开 —— 很多时候是路径逻辑错了，比如误把
./img/写成../img/ - 给
<img>加onerror回调：onerror="this.style.display='none'"或替换占位图，避免空白单元格影响布局
表格结构越复杂，越容易忽略路径基准和 DOM 插入时机。图片不是“插进去就完事”，它得在正确上下文里加载。
