JavaScript随机加载猫咪图片提示找不到资源 仅单图加载可正常运行

• 核心错误：事件回调参数异常：你给按钮绑定click事件时直接将click4pics作为回调函数，触发点击时浏览器会自动将Event事件对象作为第一个参数传入函数，而不是你预期的数组下标。此时cat$Images[i]读取到的是undefined，拼接出的图片路径为images/undefined，自然会触发图片找不到的报错。
• 附加逻辑错误：属性赋值异常：代码中catpics.alt = cat$Images.src的写法错误，cat$Images是数组本身没有src属性，会导致alt属性失效，但该问题不影响图片加载。
• 代码隐患：对象结构错误：你定义的PicturePairs数组中单个对象存在重复的name、img属性，同一个对象的重复属性会被后定义的内容覆盖，最终该对象只会保留name: "C2"、img: "C2.jpg"，后续使用该数组时会出现预期外的结果。

你修改为单张图片加载时可以正常运行，说明images/xxx.jpg的路径配置完全正确，不需要调整路径。

const cat$Images = [
  { name: "C1", img: "C1.jpg" },
  { name: "C2", img: "C2.jpg" }, 
  { name: "C3", img: "C3.jpg" }, 
  { name: "C4", img: "C4.jpg" }
]

// 修复PicturePairs的结构，若不需要使用该数组可直接删除
let PicturePairs = [
  { name: "C1", img: "C1.jpg" }, 
  { name: "C2", img: "C2.jpg" }
]
console.log(PicturePairs)
console.log(cat$Images)    

function shuffle(array) {
  let currentIndex = array.length, randomIndex;
  while(currentIndex != 0) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;
    [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
  }
}

shuffle(cat$Images)
shuffle(PicturePairs)

// 新增计数器，记录当前加载到第几张图片
let currentImgIndex = 0
let clickImage = document.querySelector("#button")
// 用匿名函数包裹回调，避免直接传入click4pics拿到事件对象
clickImage.addEventListener("click", () => {
  // 若需要每次点击都重新打乱图片顺序，可放开下面这行注释
  // shuffle(cat$Images)
  click4pics()
})

function click4pics(i = currentImgIndex) {
  // 下标越界判断，避免所有图片加载完后点击报错
  if (i >= cat$Images.length) return
  let catpics=document.createElement("img")
  catpics.src = `images/${cat$Images[i].img}`;
  // 修复alt属性赋值
  catpics.alt = cat$Images[i].name;
  document.querySelector("#box").appendChild(catpics);
  catpics.addEventListener("click", function(e) {
    console.log(e.target.src);
  })
  currentImgIndex++
}

// 页面初始化加载4张图片
click4pics(0)
click4pics(1)
click4pics(2)
click4pics(3)

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