相对路径最稳妥，如./images/logo.png；绝对路径在file://协议下会404；src必须存在且正确，空值或非法值均导致加载失败；本地开发建议用http.server启动服务。
图片路径写相对还是绝对？
相对路径最稳妥，只要 HTML 文件和图片在同一个项目目录下，就用 ./images/logo.png 这种写法。浏览器按 HTML 当前位置出发找图，不依赖服务器根目录或系统盘符。绝对路径像 /assets/icon.jpg 看似简洁，但只在 Web 服务器（如 Nginx、Apache）运行时才有效；直接双击打开 HTML 文件，/ 指向的是本地磁盘根（比如 C:\），必然 404。
- 直接拖拽图片进编辑器生成的路径常带
file:/// 前缀，浏览器会拦截加载，必须删掉
- Windows 下路径分隔符用
/，别用 \ —— HTML 规范只认正斜杠，img/src=".\photo.jpg" 是错的
- 路径里有中文或空格？浏览器可能编码失败，优先改名成
banner_v2.jpg
<img alt="HTML中如何插入本地图片_HTML插入本地图片路径规则【图片加载】" > 的 src 必须加吗？
必须。没有 src 属性，<img alt="HTML中如何插入本地图片_HTML插入本地图片路径规则【图片加载】" > 标签就是个透明占位框，连 alt 文字都不会触发渲染。常见错误是把路径拼错成 src="imagees/logo.png"（多一个 e），或者漏写扩展名，比如 src="icon"——浏览器不会自动补 .png。
-
src 值为空字符串 src="" 会触发一次无效请求，控制台报 GET file:///.../ 404
- 不要用
javascript:void(0) 或 # 占位，那不是合法图片地址
- 开发阶段可临时用
src="data:image/svg+xml,%3Csvg xmlns='<a href="https://www.php.cn/link/abcbe3ee8523b90b416337f0abd94a53">http://www.w3.org/2000/svg'%3E%3Ccircle</a> cx='50' cy='50' r='40' fill='red'/%3E%3C/svg%3E" 内联占位，避免路径干扰
本地双击打开 HTML 时图片不显示？
这是最典型的环境误判：以为“本地文件”和“本地服务器”是一回事。双击打开的 HTML，协议是 file://，浏览器出于安全限制，会阻止某些跨目录访问（比如从 D:/project/index.html 加载 C:/other/pic.jpg），也会对相对路径解析更严格。
- 确保图片和 HTML 在同一级或子目录下，例如：
index.html 和 images/cat.jpg 同属 D:/my-site/
- 检查浏览器控制台（F12 → Console），真实错误是
Failed to load resource: net::ERR_FILE_NOT_FOUND 还是 net::ERR_BLOCKED_BY_CLIENT
- 临时解决方法：用 Python 快速起个本地服务，
python3 -m http.server 8000，然后访问 <a href="https://www.php.cn/link/fcbb3a1c04ec11f1506563c26ca63774">https://www.php.cn/link/fcbb3a1c04ec11f1506563c26ca63774</a>，路径规则立刻变正常
要不要加 loading="lazy"？
加，但仅限页面中下部的图片。这个属性让浏览器延迟加载视口外的图片，对本地静态页几乎没坏处，还能减少初始 DOM 渲染压力。但首页首屏大 Banner 或关键图标别加，否则可能闪一下空白再出现。
-
loading="lazy" 在 Safari 15.4+、Chrome 76+ 支持良好，老版本会忽略该属性，无副作用
- 它不影响
src 路径写法，和路径无关，只是加载时机策略
- 如果用了
IntersectionObserver 手动实现懒加载，就别重复加这个属性，避免行为冲突
file:/// 前缀，浏览器会拦截加载，必须删掉/，别用 \ —— HTML 规范只认正斜杠，img/src=".\photo.jpg" 是错的banner_v2.jpg
<img alt="HTML中如何插入本地图片_HTML插入本地图片路径规则【图片加载】" > 的 src 必须加吗？
必须。没有 src 属性，<img alt="HTML中如何插入本地图片_HTML插入本地图片路径规则【图片加载】" > 标签就是个透明占位框，连 alt 文字都不会触发渲染。常见错误是把路径拼错成 src="imagees/logo.png"（多一个 e），或者漏写扩展名，比如 src="icon"——浏览器不会自动补 .png。
-
src值为空字符串src=""会触发一次无效请求，控制台报GET file:///.../ 404 - 不要用
javascript:void(0)或#占位，那不是合法图片地址 - 开发阶段可临时用
src="data:image/svg+xml,%3Csvg xmlns='<a href="https://www.php.cn/link/abcbe3ee8523b90b416337f0abd94a53">http://www.w3.org/2000/svg'%3E%3Ccircle</a> cx='50' cy='50' r='40' fill='red'/%3E%3C/svg%3E"内联占位，避免路径干扰
本地双击打开 HTML 时图片不显示？
这是最典型的环境误判：以为“本地文件”和“本地服务器”是一回事。双击打开的 HTML，协议是 file://，浏览器出于安全限制，会阻止某些跨目录访问（比如从 D:/project/index.html 加载 C:/other/pic.jpg），也会对相对路径解析更严格。
- 确保图片和 HTML 在同一级或子目录下，例如：
index.html 和 images/cat.jpg 同属 D:/my-site/
- 检查浏览器控制台（F12 → Console），真实错误是
Failed to load resource: net::ERR_FILE_NOT_FOUND 还是 net::ERR_BLOCKED_BY_CLIENT
- 临时解决方法：用 Python 快速起个本地服务，
python3 -m http.server 8000，然后访问 <a href="https://www.php.cn/link/fcbb3a1c04ec11f1506563c26ca63774">https://www.php.cn/link/fcbb3a1c04ec11f1506563c26ca63774</a>，路径规则立刻变正常
要不要加 loading="lazy"？
加，但仅限页面中下部的图片。这个属性让浏览器延迟加载视口外的图片，对本地静态页几乎没坏处，还能减少初始 DOM 渲染压力。但首页首屏大 Banner 或关键图标别加，否则可能闪一下空白再出现。
-
loading="lazy" 在 Safari 15.4+、Chrome 76+ 支持良好，老版本会忽略该属性，无副作用
- 它不影响
src 路径写法，和路径无关，只是加载时机策略
- 如果用了
IntersectionObserver 手动实现懒加载，就别重复加这个属性，避免行为冲突
index.html 和 images/cat.jpg 同属 D:/my-site/
Failed to load resource: net::ERR_FILE_NOT_FOUND 还是 net::ERR_BLOCKED_BY_CLIENT
python3 -m http.server 8000，然后访问 <a href="https://www.php.cn/link/fcbb3a1c04ec11f1506563c26ca63774">https://www.php.cn/link/fcbb3a1c04ec11f1506563c26ca63774</a>，路径规则立刻变正常loading="lazy"？
加，但仅限页面中下部的图片。这个属性让浏览器延迟加载视口外的图片，对本地静态页几乎没坏处，还能减少初始 DOM 渲染压力。但首页首屏大 Banner 或关键图标别加，否则可能闪一下空白再出现。
-
loading="lazy"在 Safari 15.4+、Chrome 76+ 支持良好，老版本会忽略该属性，无副作用 - 它不影响
src路径写法，和路径无关，只是加载时机策略 - 如果用了
IntersectionObserver手动实现懒加载，就别重复加这个属性，避免行为冲突
路径是否正确，最终只取决于 HTML 文件被浏览器如何解析——不是你脑子里怎么想的，而是它实际从哪个 URL 开始 resolve。这点容易被跳过，但所有加载失败问题，八成卡在这一步。
