Notepad++运行HTML预览不显示图片_路径引用问题解决方法【方法】-notepad-PHP中文网

notepad++无法预览html图片的根本原因是其调用浏览器以file://协议打开文件，触发本地安全限制导致路径解析异常；应改用live server等本地http服务，在http://localhost下运行页面以确保路径正确解析。

notepad++运行html预览不显示图片_路径引用问题解决方法【方法】

Notepad++ 本身不运行 HTML，它只是个文本编辑器；所谓“运行预览”实际是调用系统默认浏览器双击打开 file:// 协议页面——这正是图片不显示的根源。直接双击或用 Notepad++ 的“在浏览器中运行”功能，会触发浏览器对本地文件路径的安全限制，尤其对相对路径解析异常、空格/中文/大小写敏感等问题高度放大。

为什么 Notepad++ 里预览图片总 404

根本原因不是 Notepad++ 有问题，而是它调起的浏览器走的是 file:/// 协议，而非 HTTP 服务。该协议下：

./ 和 ../ 行为不稳定，Chrome/Edge 会拦截部分跨目录请求
路径中含空格（如 birthday project screenshot.png）会被截断或错误编码，变成 birthday%20project%20screenshot.png 但文件系统不认
大小写不敏感的 Windows 本地可能“碰巧”显示，但一旦部署到 Linux 服务器就全挂
浏览器 Network 面板里能看到明确的 404 请求 URL，比如 file:///C:/my-site/images/cat.jpg —— 这个路径浏览器压根不会去磁盘上真找

用 Live Server 替代双击打开（最简有效）

别再右键 → “在浏览器中运行”。装一个轻量本地服务，让页面跑在 http://localhost:xxxx 下，路径解析立刻回归标准。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

VS Code 用户：装 Live Server 插件，右键 HTML 文件 → “Open with Live Server”
命令行用户：进项目根目录，运行 npx http-server（需 Node.js）或 python3 -m http.server 8000
Notepad++ 用户：可配合插件 NppExec 自动执行上述命令，或干脆用 VS Code 做前端编辑——Notepad++ 不适合调试 HTML 资源加载
验证是否生效：地址栏看到 http:// 开头，Network 面板里图片请求状态码是 200，且 Request URL 是干净的相对路径（如 http://localhost:8080/images/logo.png）

路径写法必须匹配 HTML 文件位置

所有 src 值都以当前 HTML 文件所在目录为起点算，不是项目根目录，也不是 Notepad++ 当前打开的文件夹。

HTML 在 /project/index.html，图片在 /project/images/icon.png → 写 src="images/icon.png"（不要加 /）
HTML 在 /project/pages/about.html，图片在 /project/images/photo.jpg → 写 src="../images/photo.jpg"
绝对路径 src="/images/logo.png" 只在网站部署到域名根目录时才对，file:// 下一定失败，HTTP 服务下也只认服务器根目录（即 http-server 启动时的当前目录）
路径一律用正斜杠 /，Windows 上也不能用 \；文件名统一小写+短横线，如 user-avatar.png，避开空格和中文

快速定位到底是路径还是文件问题

别猜，用浏览器开发者工具实锤：

右键页面 → “检查” → 切到 Network 标签 → 刷新 → 筛选 img 或扩展名（如 .png）
看到 404：点开该请求 → 看 Headers → 找 Request URL，复制粘贴到新标签页——如果打不开，说明路径错或文件不存在
看到 200 但图空白：右键该请求 → “Open in new tab”，若图片能打开，说明 HTML/CSS/JS 有隐藏逻辑（比如 display: none 或宽高为 0）
啥都没看到：检查 src 是否为空、是否拼错成 scr、是否用了非法标签如 <image></image>