相对路径最稳妥，如./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> 的 src 必须加吗？ 必须。没有 src 属性，<img> 标签就是个透明占位框，连 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 手动实现懒加载，就别重复加这个属性，避免行为冲突

路径是否正确，最终只取决于 HTML 文件被浏览器如何解析——不是你脑子里怎么想的，而是它实际从哪个 URL 开始 resolve。这点容易被跳过，但所有加载失败问题，八成卡在这一步。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载