图片路径需按html文件位置写相对路径，本地双击用file://协议时不可用绝对磁盘路径；必须添加alt属性提升无障碍与seo；加载失败优先查404、混合内容拦截及js覆盖src等问题。
直接用 <img> 标签，但路径写错就完全不显示——不是代码问题，是路径没对上。
图片路径怎么写才有效
浏览器加载图片时只认「从 HTML 文件出发能走到的路径」，和你双击打开 HTML 的方式强相关。
- 本地双击打开（
file://协议）：路径必须是相对当前 HTML 文件的位置，比如图片在同级目录，就写src="logo.png"；在子文件夹里，就写src="images/photo.jpg" - 通过服务器运行（如
http://localhost）：路径仍按相对路径算，但不能用file:///或绝对磁盘路径（如C:\site\img.png），浏览器会直接拒绝加载 - 想省事又不怕外链失效？用网络地址：
src="https://example.com/pic.jpg"，但注意防盗链限制可能让图变叉
<img> 必须加 alt 属性
不是可选，是实际需要：屏幕阅读器靠它读图，图片加载失败时也靠它占位。空着或写成 alt="" 仅适用于纯装饰图（且应加 role="presentation"）。
常见错误：<img src="icon.svg"> —— 没 alt，SEO 差、无障碍差、调试时看不出是不是真加载了。
正确写法示例：<img src="banner.jpg" alt="公司2024年春季发布会现场照片">
图片加载失败时怎么快速定位问题
右键「检查元素」看控制台报什么错，重点盯这三类：
-
404 Not Found：路径拼错了，大小写、扩展名（.JPGvs.jpg）、多/少斜杠都算错 -
Blocked loading mixed active content：HTTP 页面里写了http://图片地址，而页面是https://，浏览器拦了——统一换//example.com/img.png或补全https:// - 没报错但空白：先确认
src值是否被 JS 动态覆盖（打断点看最终渲染的src）、再查图片本身是否损坏（单独用地址栏访问该 URL 看能否打开）
路径问题永远比标签语法更常导致图片不出现，改完记得刷新前先看开发者工具的 Network 标签页里这张图有没有发请求、状态码是多少。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
