本文详解如何将本地计算机中的图片嵌入html网页，重点说明相对路径的正确使用方法，避免直接使用绝对路径导致的加载失败问题，并提供实用代码示例与项目结构建议。

本文详解如何将本地计算机中的图片嵌入html网页，重点说明相对路径的正确使用方法，避免直接使用绝对路径导致的加载失败问题，并提供实用代码示例与项目结构建议。

在HTML中插入本地图片时，切勿直接使用Windows绝对路径（如 C:\Users\Name\Pictures\logo.jpg），因为浏览器出于安全限制，无法通过file://协议读取跨盘符或深层系统路径的资源。正确的做法是采用相对路径，将图片与HTML文件组织在同一项目目录结构下。

✅ 推荐项目结构（简洁可靠）

my-website/
├── index.html
├── logo.jpg
└── images/
    └── banner.png

✅ 正确写法：使用相对路径

• 图片与HTML同级目录：

  @@##@@

• 图片位于子文件夹 images/ 中：

  @@##@@

• 若HTML在子目录（如 pages/about.html），需向上回溯：

  @@##@@

⚠️ 注意事项

• 文件名区分大小写（尤其部署到Linux服务器时），建议统一用小写字母+短横线命名，如 hero-image.jpg；
• 始终添加 alt 属性，提升可访问性与SEO；
• 确保图片格式支持（.jpg, .png, .webp, .svg 等），且路径无中文、空格或特殊符号（可重命名为 photo1.png）；
• 浏览器缓存可能导致修改后不刷新，可强制硬刷新（Ctrl+F5）或检查开发者工具（F12 → Network 标签）确认图片是否404。

? 小技巧：快速验证路径

右键点击HTML文件 → “在浏览器中打开”，然后在地址栏查看URL（如 file:///D:/my-website/index.html）。此时src="logo.jpg"即表示从该目录下查找同名文件——这才是浏览器真正理解的路径逻辑。

Article To Html

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

下载

遵循以上规范，即可稳定、跨平台地在网页中嵌入本地图片。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！