图片不显示主因是src路径错误：必须以HTML文件所在目录为起点写相对路径，禁用Windows反斜杠和编辑器伪路径；绝对路径“/”仅部署后生效，本地双击会失效。
图片不显示，八成是 src 路径写错了——它永远以 HTML 文件所在位置为起点计算，不是编辑器打开的文件夹，也不是你心里想的“应该在哪”。
路径怎么写：相对路径最常用也最可靠
浏览器找图时，只认 HTML 文件当前在哪个文件夹里。比如你的 index.html 在 /project/ 目录下，那所有 src 都得从这个位置出发算起：
- 图片和 HTML 同目录：
src="banner.jpg" - 图片在子目录
images里：src="images/logo.png" - 图片在上一级目录的
assets文件夹：src="../assets/photo.jpg" - 跨两级再进子目录：
src="../../static/icons/icon.svg"
别用 Windows 资源管理器复制出来的带反斜杠的路径（如 C:\my\site\img.jpg），浏览器不认；也别直接粘贴编辑器左侧文件树里点出来的“完整路径”，那通常是绝对路径或 IDE 自定义路径，不是浏览器能解析的。
绝对路径 / 开头的写法只适用于网站部署后
src="/images/cover.jpg" 这种以 / 开头的路径，意思是“从网站根目录开始找”。它在本地双击 HTML 文件（file:// 协议）时大概率失效，因为此时没有“网站根目录”的概念；只有部署到服务器（如 http://example.com/）后才真正生效。
- 本地测试阶段慎用
/xxx，容易白屏且难排查 - 上线前统一检查：如果项目部署在子路径（如
https://example.com/blog/），/images/会去找https://example.com/images/，而不是https://example.com/blog/images/，导致 404 - 真要用，确保开发服务器（如 Vite、Webpack Dev Server）配置了正确的
base或public目录
网络图片和 Base64 的适用场景很窄
除非明确需要，否则别轻易用这两种方式：
- 网络图片（
src="https://cdn.example.com/pic.jpg"）：依赖外部服务稳定性，加载慢可能拖累首屏，且无权控制图片生命周期；适合 CDN 托管的静态资源，或第三方图标 - Base64 编码（
src="data:image/png;base64,iVBOR..."）：只适合极小图标（ - 本地文件路径加
file:///前缀（如file:///C:/pics/test.jpg）：仅限本地临时预览，发给别人或放服务器就彻底失效
alt 不是可选项，而是必填项且必须有意义
没写 alt 不影响图片显示，但会触发可访问性警告，屏幕阅读器读不出内容，搜索引擎也不理解这张图在说什么。更关键的是：当路径出错时，alt 文本就是你唯一能确认“这里该有图”的线索。
- 别写
alt=""或alt="图片"这类空泛描述 - 写清楚内容和作用，例如：
alt="微信公众号二维码，扫码关注获取更新"、alt="产品主图：黑色MacBook Pro侧面特写" - 纯装饰性图片（如分隔线、背景花边）才用
alt=""，但更推荐用 CSSbackground-image实现
路径问题本质是文件系统定位问题，不是语法问题。每次插图前，先用文件管理器确认 HTML 和图片的实际相对位置，比反复试错快得多。最常被忽略的一点：路径区分大小写，IMG.JPG 和 img.jpg 在 Linux 服务器上就是两个文件。
