图片加载失败主要因路径错误或跨域被拦：先查控制台错误，再按顺序排查Network面板状态码（404/0/200）、路径基准（相对HTML文件）、跨域配置（CORS）及onerror监听。
图片加载失败，八成是路径写错或跨域被拦——先看控制台报什么错误，再按顺序排查
查 Network 面板里图片请求的状态码和响应
打开浏览器开发者工具 → Network 标签 → 刷新页面 → 筛选 Img 或输入图片文件名。重点看三项：
-
404：路径错误，服务器根本没找到这个文件 -
0（或显示(failed)）：常见于跨域请求被拒绝，或本地用file://协议直接双击 HTML 打开（无 HTTP 服务） -
200但图片不显示：检查Content-Type是否为image/*，也可能是图片本身损坏或格式不被支持（如 Safari 不支持 WebP）
验证图片路径是否正确：相对路径要以 HTML 文件位置为基准
HTML 中 <img src="assets/enemy.png" alt="HTML5小游戏图片加载失败怎么查_路径错误与跨域限制排查汇总【详解】" > 的路径，不是相对于 JS 文件、也不是相对于当前 URL，而是相对于该 HTML 文件所在目录。容易踩的坑：
- 开发时用 VS Code Live Server 启动，路径是
http://127.0.0.1:5500/index.html，那么src="img/player.png"就要对应/img/player.png（根目录下） - 若 HTML 在子目录如
/game/index.html，而图片在/assets/，应写src="../assets/player.png"或更稳妥地统一用绝对路径src="/assets/player.png" - 构建后路径可能被重写（如 Webpack 的
public目录），确保图片已正确复制到输出目录，且引用路径与实际部署结构一致
跨域问题（CORS）触发条件与绕过方式
当图片来自不同源（协议、域名、端口任一不同），且服务器未返回 Access-Control-Allow-Origin 响应头，canvas.drawImage() 就会报 SecurityError: The canvas has been tainted by cross-origin data。常见场景：
Software Data Github Interact Developer Helper
下载
帮助用户满足已验证需求：代理用户在Clawhub上对GitHub式工作流有强烈需求，需要实用帮助修复bug、强化设置。
立即学习“前端免费学习笔记（深入）”；
- 本地双击 HTML 运行 → 协议是
file://，所有资源都算跨域 → 必须起本地服务（如npx http-server或 VS Code Live Server） - 图片托管在 CDN 或第三方图床（如 imgur、github.io）→ 检查其是否允许跨域：在 Network 中点开图片请求，看响应头是否有
Access-Control-Allow-Origin: * - 自己搭的服务没配 CORS → 后端需添加响应头，或前端加
crossOrigin="anonymous"属性（注意：加了之后若服务器不配合，图片反而加载失败）
用 img.onerror 和 img.onload 主动捕获加载结果
别只靠肉眼判断图片有没有出来，加上事件监听能快速定位失败节点：
const img = new Image();
img.crossOrigin = 'anonymous'; // 如需后续 canvas 操作
img.src = '/assets/bullet.png';
img.onload = () => console.log('✅ bullet.png 加载成功');
img.onerror = () => console.error('❌ bullet.png 加载失败，请检查路径或跨域设置');
注意：onerror 不会冒泡，也不能用 try/catch 捕获；如果图片缓存中已有，onload 可能同步触发，所以监听要写在 src 赋值前。
真正卡住的地方往往不是“怎么写”，而是没看清控制台第一行报错，或者误以为路径是对的——建议把图片 URL 复制出来，直接粘贴到浏览器地址栏敲回车，看能不能单独打开。打不开，就不是代码问题，是路径或服务问题。
