JavaScript使用数组设置style.backgroundImage报404资源加载错误怎么解决

• 核心错误是变量未正确解析：你在设置backgroundImage时写的"url('images[i]')"将images[i]作为固定字符串处理，没有读取数组对应下标的路径值，浏览器会直接请求名为images[i]的不存在资源，触发404报错。
• 潜在错误为路径不匹配：如果实际图片存放目录、相对路径和你数组中写的../image/xxx.jpg不匹配，也会触发404。
• 非报错类隐患：setTimeout("changeImg()", time)的字符串参数写法属于隐式eval，执行上下文不稳定，存在潜在执行异常风险。

1. 修正背景图赋值逻辑，正确拼接变量，以下两种写法二选一即可：
   • 传统字符串拼接：

   slide.style.backgroundImage = "url('" + images[i] + "')";
   

   • ES6模板字符串（更简洁）：

   slide.style.backgroundImage = `url('${images[i]}')`;
   

2. 校验图片路径：确认你的项目目录结构和写的路径匹配，例如当前JS文件放在js目录下时，需要保证image目录和js目录同级，目录名不要少写/多写s，图片文件名和后缀名完全匹配。
3. 修正setTimeout写法，改为传入函数引用：

   setTimeout(changeImg, time);
   

var i = 0;      
var images=[];
var slide = document.getElementById("slide");
var time = 3000;
     
images[0] = '../image/1.jpg';
images[1] = '../image/2.jpg';
images[2] = '../image/3.jpg';
images[3] = '../image/4.jpg';
images[4] = '../image/5.jpg';
images[5] = '../image/6.jpg';
images[6] = '../image/7.jpg';

function changeImg(){
    // 修正后的赋值逻辑，使用模板字符串
    slide.style.backgroundImage = `url('${images[i]}')`;

    if(i < images.length - 1){
      i++; 
    } else { 
        i = 0;
    }
    // 修正setTimeout写法
    setTimeout(changeImg, time);
}

window.onload=changeImg;

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