纯HTML文件中如何使用相对路径加载图片（无需Node.js模块）

核心说明 #

纯HTML文件运行在浏览器环境，完全不支持Node.js的require、__dirname、path.join等API，你script标签里的Node.js代码会直接报错，必须删掉。

相对路径的规则 #

HTML里的资源路径是相对于当前HTML文件的位置计算的，核心规则：

• ./xxx.png：指向和当前HTML文件同一目录下的xxx.png
• ../xxx.png：指向当前HTML文件所在目录的上级目录下的xxx.png
• 子目录名/xxx.png：指向当前HTML文件所在目录下的指定子目录里的xxx.png

针对你的场景修正 #

假设你的文件结构是：

项目根目录
└── resources/
    ├── email.html
    └── logo.png

你的img标签路径已经正确，直接保留即可，同时删除无效的Node.js代码。修正后的resources/email.html代码：

<!DOCTYPE html>
<html>
<head>
    <style>
    </style>
</head>
<body>
    <img src="./logo.png">
    <p>Hello</p>
</body>
</html>

如果logo.png在项目根目录（和resources文件夹同级），路径要改成：

<img src="../logo.png">

如果logo在resources的子目录（比如resources/images/logo.png），路径则为：

<img src="./images/logo.png">

验证方法 #

直接用浏览器打开email.html，若图片加载失败，右键点击图片选择「检查」，查看「网络」标签里浏览器请求的图片URL，对比实际文件位置调整路径即可。

内容的提问来源于stack exchange，提问作者learncode