HTML保存不会自动下载图片，需确保HTML文件、图片文件及正确路径三者同时存在且位置匹配；推荐用./开头的相对路径，禁用双击打开，必须用Live Server等HTTP服务调试，并注意大小写和正斜杠。
直接保存 HTML 源码不会自动下载图片
很多人以为复制 <img src="logo.png"> 到新文件并存为 index.html，就能“保存图片”，结果双击打开发现全是叉号。这是因为 HTML 只是文本，src 属性只是路径指令，不携带任何像素数据——浏览器得自己按这个路径去找文件。没找到，就 404。
所以关键不是“保存标签”，而是确保：HTML 文件 + 图片文件 + 正确路径 三者同时存在、位置匹配。
相对路径怎么写才不报 404
路径错误占图片不显示问题的 80% 以上。必须以 HTML 文件所在目录为原点，用正斜杠 /，且大小写敏感（尤其 macOS/Linux）。
-
./photo.jpg：最推荐写法，明确表示“当前目录”，比photo.jpg更可靠 -
images/photo.jpg：子目录，不用加./，但不能写成images\photo.jpg（反斜杠无效） -
../assets/icon.svg：上一级目录里的assets文件夹，注意..后必须紧跟/ -
/project/logo.png：这是服务器根路径（不是你电脑的 C:\），本地双击打开一定失败
本地双击打开 vs 用 Live Server 启动的区别
双击 HTML 文件走的是 file:// 协议，浏览器对路径校验更严，且不支持跨目录读取（如从 C:/a/index.html 引用 C:/b/photo.jpg）。而 Live Server（如 VS Code 插件）起一个本地 HTTP 服务，路径行为更接近线上环境。
立即学习“前端免费学习笔记（深入）”；
- 调试阶段务必启用 Live Server，否则很多相对路径看似正确却加载失败
- 发给别人前，检查整个文件夹结构是否扁平：HTML 和图片最好同级，或严格按
images/xxx.jpg组织 - 不要依赖绝对路径如
C:\Users\Me\pic.jpg，它在别人电脑上毫无意义
在线图片 URL 能直接用，但有防盗链风险
写 <img src="https://example.com/photo.jpg"> 确实能省事，但实际使用中容易突然失效。
- 目标网站启用了 Referer 防盗链，你的 HTML 本地打开时请求头无 referer，被拒绝返回 403
- 图片链接过期（常见于临时图床）、域名下线、HTTPS 混合内容拦截（HTTP 图片在 HTTPS 页面中被禁）
- 网络不可达时完全无法 fallback，连
alt文本都救不了体验
真正要长期稳定，还是把图下到本地，用相对路径引用——哪怕只是右键另存为，也比靠 URL 强。
