本地正常的JS图片DOM在GitHub.io失效，ColorThief问题排查

我最近在学习基础HTML/CSS/JS，搭了个小型摄影博客：页面加载后用JS动态生成图片容器，图片的标题、源链接、描述都从JSON数组里拉取，还用上了ColorThief提取图片的平均颜色，把它设为对应div的背景色。

本地运行的时候一切顺畅，图片和背景色都正常显示，但部署到GitHub.io后就出问题了：

• Console里打印img.width输出0，ColorThief直接因为图片尺寸为0报错
• 偶尔刷新页面，会有1-2张图片能正常显示并应用正确的背景色
• 注释掉ColorThief相关代码后，GitHub.io上所有图片都能正常加载（使用默认背景色）

我已经排查过的问题点 #

• 文件名都是小写数字命名（比如1.jpg），不存在大小写不匹配的问题
• ColorThief本身没问题，本地环境和偶尔线上正常运行的情况都能证明这一点
• 文件路径没有问题，毕竟注释掉ColorThief代码后，所有图片都能正常加载

原来的问题代码片段（ColorThief相关部分） #

// 原getHighlights()函数中ColorThief相关代码块
function getHighlights() {
  // ... 其他加载JSON和创建元素的代码
  const img = new Image();
  img.src = photo.src;
  // 未确保图片加载完成就调用ColorThief
  const colorThief = new ColorThief();
  const dominantColor = colorThief.getColor(img);
  photoDiv.style.backgroundColor = `rgb(${dominantColor[0]}, ${dominantColor[1]}, ${dominantColor[2]})`;
  // ... 其他代码
}

尝试过的无效方案 #

我一开始尝试给图片添加加载监听，但可能是函数结构的问题，没起到预期效果。

最终解决方法 #

后来我重构了创建div和处理CSS的函数，把这些逻辑放到匿名函数内部调用，确保图片完全加载后再执行ColorThief的颜色提取操作，问题就彻底解决了！

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