如何从根目录访问文件 子目录JS文件如何定位img文件夹下的图片资源

首先明确你的项目根目录默认结构如下：

项目根目录
├── 引入JS的HTML文件（默认假设存放在根目录，若位置不同可对应调整路径层级）
├── JS/
│   └── main.js
└── img/
    └── img1.png

你可以根据自己的使用场景选择对应写法：

场景1：路径相对于引入JS的HTML文件（绝大多数场景适用） #

JS代码中写的资源路径默认是相对于引入该JS的HTML文件的路径，而非JS文件自身路径。如果HTML存放在项目根目录，直接用以下写法即可：

• 相对路径写法：./img/img1.png
• 根路径写法（更稳妥，避免嵌套页面路径出错）：/img/img1.png（仅适用于项目根目录为网站部署根目录的场景）
  示例代码：

// main.js 中创建图片元素的示例
const demoImg = new Image()
demoImg.src = './img/img1.png'
// demoImg.src = '/img/img1.png' 根路径写法可选
document.body.appendChild(demoImg)

场景2：路径相对于JS文件自身位置（不受HTML位置影响） #

如果需要路径完全跟随JS文件位置，不受引入它的HTML文件路径影响，可以用import.meta.url获取当前JS文件的绝对路径后拼接目标资源路径：

// main.js 中的写法，../ 表示从JS所在的JS目录回到上一级根目录
const imgPath = new URL('../img/img1.png', import.meta.url).href
const demoImg = new Image()
demoImg.src = imgPath

该写法同时适配原生JS开发、vite/webpack等构建工具场景。

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