JS引用图片路径触发404错误，如何正确设置文件引用路径？

问题背景 #

在通过JS设置页面背景图片时，出现资源未找到的404错误，相关代码及文件结构如下：

代码片段 #

HTML

<body>
</body>

CSS

body {
    background-color: white;
}

JavaScript

body = document.querySelector('body')
rand10 = Math.floor(Math.random() * 10)

/* 对应数字都有图片，此处简化示例 */
if (rand10 == 1) {
    body.style.backgroundImage =`${url(./images/1.jpg)}`
}

文件结构 #

TOADOO
├─ Images
│   └─ 1.jpg, 2.jpg ... nth.jpg
└─ Video
    ├─ index.html
    ├─ script.js
    └─ styles.css

错误原因与修复方案 #

1. 路径层级错误 #

你的script.js位于Video文件夹内，而图片在同级的Images文件夹中。当前代码里的./images/1.jpg是在Video文件夹下查找images子目录，显然不存在。正确的相对路径需要先返回上一级目录，再进入Images文件夹：
../Images/1.jpg

2. backgroundImage语法错误 #

JavaScript中设置backgroundImage时，url()是CSS语法，需要将整个值用引号包裹，且不需要模板字符串的变量插值写法。正确的赋值方式为：

body.style.backgroundImage = 'url("../Images/1.jpg")'

修正后的完整JS代码 #

const body = document.querySelector('body');
const rand10 = Math.floor(Math.random() * 10);

if (rand10 === 1) {
    body.style.backgroundImage = 'url("../Images/1.jpg")';
}

额外注意事项 #

• 文件名/文件夹名区分大小写，确保代码中路径的Images与实际文件夹名大小写完全一致；
• 建议使用const/let声明变量，避免全局变量污染；
• 如果是批量设置图片，可以通过循环简化代码，比如：

  const imgPath = `../Images/${rand10}.jpg`;
  body.style.backgroundImage = `url("${imgPath}")`;
  

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