HTML怎么插入本地图片_网页显示电脑磁盘图片代码【基础】-html教程-PHP中文网

浏览器禁止直接读取本地绝对路径，应使用相对路径引用图片，如src="logo.png"；注意大小写、避免空格和中文名；禁用file:///协议；小图可用data URL内联。

html怎么插入本地图片_网页显示电脑磁盘图片代码【基础】

直接用标签，但路径不能写 `C:\xxx` 或 `/C:/xxx`

浏览器无法直接读取本地磁盘绝对路径（比如 C:\Users\Alice\Pictures\logo.png），这是安全限制。哪怕你双击 HTML 文件在本地打开，src 里写绝对 Windows 路径也会显示空白或报错 net::ERR_FILE_NOT_FOUND。

正确做法是把图片和 HTML 文件放在同一目录（或子目录），用相对路径引用：

@@##@@           <!-- 同级目录 -->
@@##@@   <!-- 子目录 images 下 -->
@@##@@  <!-- 上级目录的 assets 文件夹 -->

路径区分大小写（尤其部署到 Linux 服务器时）
空格和中文名容易出问题，建议文件名用英文+短横线，如 my-banner.jpg
不要用 file:///C:/... 协议——现代浏览器会拦截或静默失败

想临时调试又没起服务？用 `data URL` 内联小图

对图标、小尺寸 PNG（src，完全不依赖文件路径：

@@##@@

实操步骤：

用在线工具（搜 “image to base64”）上传本地图片，复制生成的字符串
粘贴到 src 中，注意开头必须是 data:image/xxx;base64,（类型要匹配，PNG 就写 image/png）
只适合小图——大图会让 HTML 膨胀，加载变慢，且无法缓存

正式开发必须用本地 Web 服务器，别双击打开 HTML

双击 HTML 文件走的是 file:// 协议，很多功能受限（跨域、fetch、Service Worker、部分 CSS 模块等）。图片虽能靠相对路径勉强显示，但一旦加 JS 动态加载、用 import、或引入现代构建工具，立刻报错。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

最轻量启动方式（无需安装）：

VS Code：装插件 Live Server，右键 HTML → “Open with Live Server”
命令行（有 Python 3）：python -m http.server 8000，然后访问 http://localhost:8000
确保图片路径按服务器根目录计算，不是按你电脑的 C 盘路径

常见错误现象和对应检查点

图片不显示？先看控制台（F12 → Console）有没有报错，再对照这些查：

GET http://localhost:8000/logo.png 404 (Not Found) → 路径写错，或文件没放对位置；检查开发者工具 Network 标签里请求的实际 URL
图片区域一片空白，无报错 → 检查 src 值是否为空、是否多写了空格、是否用了中文引号“”代替英文引号""
显示一个破损图标（?）→ 图片格式不支持（如 WebP 在旧浏览器）、后缀名和实际格式不符（.jpg 文件其实是 PNG）
双击打开时控制台报 Not allowed to load local resource → 正是 file:// 协议被拦，必须起服务

路径问题从来不是“写对了就行”，而是“在当前运行上下文里，浏览器能找到的相对位置”。本地调试阶段最容易忽略这点。