使用Javascript Canvas和HTML5时特定背景图加载失败求助

问题描述 #

使用Javascript Canvas和HTML5开发游戏，已成功加载约100张背景图，但ROOM_102_16_C.png始终无法加载。文件名无空格、代码逻辑与其他正常加载的背景图完全一致，此前类似问题（camera_07改文件名后加载失败）通过添加换行空格解决，但此方法对当前问题无效。

相关代码与文件结构 #

加载失败的代码片段 #

document.getElementById('currentBackground').src = "assets/visual/ROOM_102/ROOM_102_16_C.png";

正常加载的相似代码片段 #

document.getElementById('currentBackground').src = "assets/visual/ROOM_102/ROOM_102_16_B.png";

目录中的文件 #

ROOM_102_16_A.png
ROOM_102_16_B.png
ROOM_102_16_C.png
ROOM_102_16_D.png

camera_16完整逻辑代码 #

if (this.currentCamera.innerText === 'ROOM_102_16') {
    if (document.getElementById('sprayPurchased').innerText === 'FALSE') {
        document.getElementById('currentBackground').src = "assets/visual/ROOM_102/ROOM_102_16_A.png";
    } 
    else if (document.getElementById('sprayPurchased').innerText === 'TRUE' &&
        document.getElementById('mysteryPurchased').innerText === 'FALSE') {
        document.getElementById('currentBackground').src = "assets/visual/ROOM_102/ROOM_102_16_B.png";
    } 
    else if (document.getElementById('mysteryPurchased').innerText === 'TRUE' &&
        document.getElementById("sequence1").innerText === 'INCOMPLETE') {
        document.getElementById('currentBackground').src = "assets/visual/ROOM_102/ROOM_102_16_C.png";
    } 
    else if (document.getElementById("sequence1").innerText === 'COMPLETE') {
        document.getElementById('currentBackground').src = "assets/visual/ROOM_102/ROOM_102_16_D.png";
    }
}

index.html中的图片元素 #

<img id="currentBackground">

排查与解决步骤 #

• 检查文件本身有效性

  • 用图片查看器直接打开ROOM_102_16_C.png，确认文件未损坏；若损坏，重新导出或替换文件。
  • 检查文件扩展名：确保系统未隐藏扩展名，实际文件不是ROOM_102_16_C.png.jpg这类伪装格式。
  • 服务器环境下检查文件权限：确保文件设置了可读权限；本地环境确认文件未被锁定。

• 验证代码分支是否触发

  • 在加载C图的分支中添加日志输出，确认代码逻辑是否走到该分支：

    else if (document.getElementById('mysteryPurchased').innerText === 'TRUE' &&
        document.getElementById("sequence1").innerText === 'INCOMPLETE') {
        console.log('触发C图加载分支');
        document.getElementById('currentBackground').src = "assets/visual/ROOM_102/ROOM_102_16_C.png";
    }
    

  • 打开浏览器控制台（F12），查看是否有对应日志，确认mysteryPurchased和sequence1的文本值是否符合条件。

• 查看网络请求状态

  • 打开浏览器开发者工具→Network标签，刷新页面触发背景图加载。
  • 找到ROOM_102_16_C.png的请求，查看状态码：
    • 404：路径或文件名错误，重点检查大小写（部分服务器/系统区分大小写）、路径层级是否正确。
    • 403：文件权限不足，调整服务器文件权限。
    • 200但图片不显示：文件损坏或MIME类型配置错误。

• 强制绕过缓存

  • 浏览器可能缓存了错误请求，可在URL后添加时间戳参数强制刷新：

    document.getElementById('currentBackground').src = `assets/visual/ROOM_102/ROOM_102_16_C.png?v=${Date.now()}`;
    

  • 或使用Ctrl+F5强制刷新页面，清除缓存。

• 替换测试定位问题

  • 将ROOM_102_16_B.png复制并重命名为ROOM_102_16_C.png，替换原文件，若能正常加载，说明原C图文件损坏。
  • 临时将C图分支的路径改为B图路径，若能加载B图，说明分支逻辑正常，问题出在文件或路径上。

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