图片加载失败主要因路径错误或跨域被拦：先查控制台错误，再按顺序排查Network面板状态码（404/0/200）、路径基准（相对HTML文件）、跨域配置（CORS）及onerror监听。
图片加载失败，八成是路径写错或跨域被拦——先看控制台报什么错误，再按顺序排查
查 Network 面板里图片请求的状态码和响应
打开浏览器开发者工具 → Network 标签 → 刷新页面 → 筛选 Img 或输入图片文件名。重点看三项：
-
404：路径错误，服务器根本没找到这个文件 -
0（或显示(failed)）：常见于跨域请求被拒绝，或本地用file://协议直接双击 HTML 打开（无 HTTP 服务） -
200但图片不显示：检查Content-Type是否为image/*，也可能是图片本身损坏或格式不被支持（如 Safari 不支持 WebP）
验证图片路径是否正确：相对路径要以 HTML 文件位置为基准
HTML 中 的路径，不是相对于 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。常见场景：
立即学习“前端免费学习笔记（深入）”；
