90%是src路径错误，应以html文件所在目录为基准：同目录写“logo.png”，子目录写“images/icon.jpg”，上级目录用“../”；禁用file://协议，改用本地服务器调试。

本地图片插不进去，90% 是 src 路径写错了，不是标签不会用，也不是浏览器坏了。

相对路径怎么写才真正有效

浏览器解析 src 时，永远以当前 HTML 文件所在目录为起点，不是项目根目录，也不是你心里想的“应该从哪开始”。

• 图片和 HTML 在同一文件夹：直接写 src="logo.png"，别加 ./（虽然多数浏览器也认，但冗余且易误导）
• 图片在子文件夹 images/ 下：写 src="images/icon.jpg"，注意是正斜杠，不是 Windows 资源管理器里看到的反斜杠
• 图片在上一级目录：写 src="../assets/photo.webp"，../ 表示退一层，可连续使用（如 ../../），但超过两层就该反思目录结构了
• VS Code 拖拽生成的路径看似方便，但它按编辑器打开的“工作区根”推算，不一定等于 HTML 所在路径——务必右键检查 HTML 文件实际位置再核对

为什么 file:// 协议在双击打开时经常失败

现代浏览器（Chrome、Edge、Firefox）默认阻止通过 file:// 协议加载本地资源，这是安全策略，不是 bug。哪怕你写了 src="file:///C:/project/photo.png"，控制台大概率报 net::ERR_FILE_NOT_FOUND 或静默空白。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

• 该方式仅适用于极早期调试，且必须确保浏览器启动时加了 --allow-file-access-from-files 参数（不推荐，有风险）
• 一旦把页面扔进 Web 服务器（哪怕 python3 -m http.server），file:// 就彻底失效，路径必须切回相对路径
• 真要离线预览又不想搭服务？用 data:image/png;base64,... 嵌入小图（图标、按钮等），但别塞超过 4KB 的图，否则 HTML 体积暴涨

常见错误现象与快速定位方法

图片不显示时，别急着重写 img 标签，先看浏览器开发者工具（F12 → Network 标签页）：

• 出现 404 Not Found：路径错，或文件名大小写不符（Logo.PNG ≠ logo.png）
• 出现 net::ERR_FILE_NOT_FOUND：用了 file:// 且被拦截，或路径含中文、空格、特殊符号（如 我的图片.jpg）
• 图片显示为小方框+文字“图片显示失败”：alt 生效了，说明 src 加载失败，问题仍在路径或文件本身
• 右键图片区域 → “检查元素”，鼠标悬停在 src 属性值上，浏览器会实时预览该路径是否能定位到文件（仅限相对路径）

alt 属性不是摆设，但也不能乱填

alt 不只是“图片挂了时显示啥”，它直接影响屏幕阅读器行为、搜索引擎理解、甚至某些浏览器的图片懒加载策略。

• 功能型图片（如提交按钮、导航图标）：写清作用，例如 alt="搜索按钮"，不是 alt="放大镜图标"
• 装饰性图片（如分割线、背景花边）：明确写 alt=""，告诉辅助技术“忽略此图”
• 完全留空或填 alt="图片" 属于无效描述，等于没写；堆砌关键词如 alt="SEO 网站设计 logo 公司品牌" 反而被降权
• 如果图片内容复杂（如信息图），alt 放不下，就用 <figure></figure> + <figcaption></figcaption> 补充，或链接到详细说明页

最常被忽略的一点：路径是文件系统层面的关系，不是代码逻辑。改完 src 后，花三秒确认图片文件是否真的存在于那个相对位置——比查十遍文档更快。