图片不显示主因是src路径错误：相对路径以html文件位置为基准，非项目根目录；需用正斜杠、避免中文/空格；file://协议下应启http服务调试；用network面板查404并验证大小写；必设alt和宽高属性。
图片路径写错导致 404 或空白
浏览器打不开图片，大概率是 src 路径不对。相对路径以当前 index.html 所在位置为起点算起，不是以项目根目录或代码编辑器打开的文件夹为准。
- 如果图片和
index.html在同一目录，直接写<img src="logo.png"> - 如果图片在
images/子目录下，写<img src="images/photo.jpg"> - 如果
index.html在/pages/下，而图片在/assets/img/，就得向上跳级：<img src="../assets/img/icon.svg">
用开发者工具（F12）看 Network 标签页里图片请求的 URL 和状态码，能快速定位是不是路径拼错了或者大小写不一致（尤其部署到 Linux 服务器时，Logo.png ≠ logo.png）。
必须加 alt 属性，不只是“可选”
alt 不是摆设，它影响可访问性、SEO 和图片加载失败时的兜底显示。空 alt="" 仅适用于纯装饰图；有信息量的图必须描述内容。
- 正确：
<img src="chart.png" alt="2024 年 Q1 用户增长趋势：环比上升 12%"> - 错误：
<img src="chart.png" alt="图片">或直接省略alt - 装饰图（如分隔线、背景花边）才用
alt=""，且建议加role="presentation"
常见遗漏：没设宽高，页面重排严重
浏览器解析 HTML 时，若没指定 width 和 height，会等图片下载完才知道尺寸，导致布局闪烁甚至跳动（layout shift），影响 CLS 指标。
- 推荐写内联尺寸：
<img src="avatar.jpg" style="max-width:90%" style="max-width:90%" alt="作者头像"> - CSS 控制更灵活，但需确保容器有明确宽高约束，否则可能拉伸变形
- 响应式场景用
max-width: 100%; height: auto;配合父容器，避免溢出
本地预览正常，上线后图片消失？检查协议和路径类型
开发时双击打开 index.html 是 file:// 协议，某些路径行为和 HTTP 服务不同。比如 src="/images/a.jpg" 中的开头斜杠，在 file:// 下指向本机根目录（几乎肯定 404），但在 Web 服务器（如 http://localhost:3000）下才指向网站根目录。
- 开发阶段建议用本地服务器预览（
npx serve、VS Code Live Server 插件等） - 避免绝对路径
/xxx，优先用相对路径，除非你明确控制部署结构 - 构建工具（Vite、Webpack）通常会重写资源路径，此时要配好
public目录或assetsDir
图片加载看似简单，但路径、协议、尺寸、语义四个点漏掉任一个，都可能让页面在某个环节崩掉——尤其是上线那一刻。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
