直接将标签放入或中是唯一可靠方式；图片路径需以html文件为起点计算，命名应避免中文、空格和特殊符号；添加max-width:100%;height:auto;确保自适应且不变形；alt属性必填且需准确描述内容。
直接把 <img> 标签塞进 <td> 或 <code><th> 里就行，别绕弯——这是唯一可靠方式，其他“用背景图”“用 CSS content 插入”都不可访问、不语义化、不能被屏幕阅读器识别。
<h3>图片路径写错是最常见的 404 原因</h3>
<p>浏览器控制台报 <code>Failed to load resource: the server responded with a status of 404 (Not Found)？八成是路径问题。相对路径必须以当前 HTML 文件为起点算起，不是以项目根目录或图片所在目录为起点。
-
src="avatar.jpg"：图片和 HTML 文件在同一目录 -
src="images/user.png"：图片在同级images/文件夹下 -
src="../assets/photo.webp"：图片在上一级目录的assets/文件夹里（注意两个点） - 绝对路径如
src="/static/img/logo.svg"要确保 Web 服务器能从根路径映射到该文件 - 中文文件名、空格、特殊符号（如
张三_照片(1).jpg）极易导致加载失败，一律改用英文+下划线命名
图片在单元格里“挤成一团”或“溢出边框”
默认 <img> 是内联元素，会受 <td> 的 <code>vertical-align 和 text-align 影响，但尺寸不受单元格限制——所以常出现撑破表格或底部留白过多。
- 加
style="max-width: 100%; height: auto;"让图片自适应单元格宽度，且不拉伸变形 - 若需居中显示，给
<td> 加 <code>style="text-align: center; vertical-align: middle;" - 避免同时设
width和height属性——硬编码尺寸会破坏响应式，尤其在移动端 - 如果图片高度差异大导致行高不一致，可统一设
<td> style="height: 80px; overflow: hidden;"，再配合 <code>object-fit: cover裁剪alt 属性不是可选项，而是必填项
不写
alt不仅影响无障碍访问，还会让搜索引擎无法理解该图片内容；更实际的是：当路径错误时，你根本看不到任何提示，只能靠审查元素去翻 DOM 看src是否为空或拼错。-
alt=""是合法的，表示该图纯装饰、无信息量（比如分隔线小图标） -
alt="王五的工牌照片"比alt="photo"更有价值，描述具体人物+用途 - 表格中多张人像时，
alt应体现上下文，例如：alt="销售部-李四-2025年度优秀员工" - 生成静态页面时，若
alt内容来自后端数据，务必做 HTML 实体转义，防止 XSS
真正麻烦的从来不是怎么插进去，而是图片加载失败后没人知道它该长什么样——所以每次写
<img>前，先默念一遍src路径对不对、alt描述准不准、max-width加没加。这三件事漏掉任何一个，后面调试花的时间都远超写代码本身。 -
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
