图片不显示的主因是路径错误，应使用相对路径而非Windows绝对路径；文件须与HTML同属一个项目文件夹；需通过开发者工具Network标签验证404错误；alt属性必须填写有意义的描述以保障可访问性。
图片不显示？先看 src 路径是不是相对路径
浏览器打不开本地图片，90% 是因为用了 C:\xxx\photo.jpg 这种 Windows 绝对路径。现代浏览器出于安全限制，直接双击打开 HTML 文件（file:// 协议）时，会拒绝加载跨盘符或深层系统路径的资源——哪怕图片真在那个位置。
真正能稳定工作的，只有相对路径：它以当前 index.html 所在文件夹为起点，用 .（当前目录）、..（上一级）、images/（子目录）这类写法定位图片。
-
src="logo.png"→ 图片和 HTML 在同一文件夹 -
src="images/banner.jpg"→ 图片在同级的images/文件夹里 -
src="../assets/icon.svg"→ 图片在 HTML 上一级目录的assets/里
文件放哪？必须和 HTML 在同一项目文件夹下
别把图片丢在“我的图片”“桌面”或 D 盘根目录——这些地方和你的 HTML 文件没有路径关系，浏览器根本找不到。
正确做法是手动建一个项目文件夹，比如叫 my-site，然后把所有东西塞进去：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
my-site/
├── index.html
├── logo.jpg
└── images/
└── hero.png
这样 <img src="logo.jpg"> 和 <img src="images/hero.png"> 才能被正确解析。复制粘贴时务必确认文件确实落到了这个结构里，而不是“看起来像”。
常见报错和快速验证方法
图片显示为空白或小图标，不是代码写错了，而是路径、名字或权限出了问题。打开浏览器开发者工具（F12 → Network 标签），刷新页面，找那个带红叉的图片请求，点开看 Status 是不是 404 —— 这说明路径错了。
- 文件名大小写不一致：
Photo.JPG和src="photo.jpg"在 Linux 服务器或某些浏览器里就是不匹配 - 路径含中文、空格或括号：重命名为
banner-1.png，别用首页图(最新).jpg - 改了图片但页面没变：可能是缓存，按
Ctrl+F5强制刷新，或检查 Network 里图片响应体是否为空 - 右键 HTML → “在浏览器中打开”，看地址栏 URL，比如
file:///D:/my-site/index.html，那么src="logo.jpg"就等价于从D:/my-site/下找logo.jpg
alt 属性不是可选项，是必填项
alt 不只是“图片挂了显示啥”，它是网页可访问性的基础。屏幕阅读器靠它描述内容，搜索引擎靠它理解图片语义，移动端弱网环境下用户也靠它知道该加载的是什么。
写 alt="" 表示这张图纯装饰、无信息量；否则必须写有意义的描述，比如：
<img src="contact.png" alt="联系邮箱和电话号码"><img src="product.jpg" alt="黑色无线蓝牙耳机，带充电盒">
别写“图片1”“无标题”这种无效文本。路径对了但 alt 空着，这张图在实际使用中就等于没存在过。
