图片加载回调里拿到的地址不对：3 个原因逐个排查

先给结论：在图片加载回调里读到的地址和你在代码里写的不一致，绝大多数不是浏览器出了错，而是三件事之一——相对路径被补全成了绝对地址、图片已经加载完成导致回调根本没触发、或者跨域图片让画布被污染后取值被拒绝。

图片加载回调里地址为什么不对？

新手最容易卡在第二种：明明写了加载完成的处理逻辑，刷新一次能跑，再刷新一次就不跑了，于是怀疑回调写法有问题。真实原因是图片被缓存后可能在脚本绑定事件之前就已经加载完，回调自然不会再触发一次。

本文用三段可以直接复制的最小代码把这三个原因复现出来，说明每种情况下读到的值分别是什么、怎么验证、以及怎么改。示例基于现代浏览器的通用行为，不需要任何框架。

先看结论

相对路径不等于写进去的值：读出来的永远是浏览器解析后的绝对地址。
回调不触发优先查加载状态：缓存命中的图片可能在绑定之前就已完成。
跨域图片会污染画布：导出或取值时会直接抛错，而不是返回空字符串。

DOM 操作的细节记不清时，翻 HTML DOM 教程里按元素分类的章节最快。

一、最小场景与路径解析规则

把问题定死：页面上有一张图，脚本里先赋值地址，再在加载完成后读取同一个属性。

<img id="pic" alt="示例图片">

const pic = document.getElementById('pic');
pic.src = 'images/logo.png';
pic.onload = function () {
  console.log('回调里读到：', pic.src);
};

这段做的是赋值相对路径，然后在加载完成的处理函数里把同一个属性打印出来。

预期结果（未在本机执行）：打印出来的不是 images/logo.png，而是形如 http://你的域名/当前目录/images/logo.png 的完整地址。

这不是 bug。赋值时浏览器会把你给的地址按当前页面地址解析成绝对地址，写进去的是相对路径，读出来的永远是解析后的结果。想拿到原始写法，要在赋值前自己存一份，或者读取 HTML 属性而不是 DOM 属性：

console.log(pic.getAttribute('src')); // images/logo.png
console.log(pic.src);                 // 绝对地址

这段做的是对比两个取值的差异。读 HTML 属性拿到的是你写进去的原始字符串，读 DOM 属性拿到的是解析后的地址。做地址比对、做缓存 key 的时候要用前者。

1.1 路径解析的基准是什么

地址解析的基准是当前页面的地址，不是当前脚本的地址。这一点在脚本被放到单独文件、或者页面用了 base 标签时最容易出错。

<base href="https://cdn.example.com/assets/">
<img id="pic2" alt="带基准的图片">

const pic2 = document.getElementById('pic2');
pic2.src = 'logo.png';
pic2.onload = () => console.log(pic2.src);

这段做的是在页面里声明了基准地址之后再赋值。打印结果会以基准地址为前缀，而不是以当前页面目录为前缀。

适用边界要讲清：如果页面里有 base 标签，所有相对路径都按它解析。很多"地址不对"的排查最后是发现项目里有人加了一行 base 标签。

二、回调不触发：赋值顺序与缓存

这是图片加载回调里最常见的一类坑。设置地址之后绑定回调，顺序反了就会漏掉事件。

const img = new Image();
img.src = 'images/logo.png';   // 先赋值
img.onload = () => {           // 后绑定
  console.log('这里可能永远不执行');
};

这段做的是先赋值地址再绑定处理函数。对于体积很小或已被缓存的图片，赋值这一步可能立刻完成加载，等绑定时事件已经过去了，回调不会被调用。

正确的顺序是先绑定、后赋值：

const img = new Image();
img.onload = () => {
  console.log('加载完成，宽高为', img.naturalWidth, img.naturalHeight);
};
img.onerror = () => {
  console.log('加载失败，检查地址是否可访问');
};
img.src = 'images/logo.png';

这段做的是把绑定放在赋值之前，并补上失败分支。对于已经存在于页面上、可能早就加载完的图片，还应该额外判断完成标记：

if (pic.complete) {
  console.log('已经加载完成，直接处理');
} else {
  pic.onload = () => console.log('等待加载完成后处理');
}

这段做的是用完成标记兜住"图片已在缓存里"的情况。判断标准是：只要图片可能来自缓存，就不能只依赖回调。

图片加载回调的分支判断流程

三、跨域图片污染画布

第三种情况发生在使用 canvas 处理图片时。把一张跨域图片画进画布之后，画布被标记为已污染，任何读取像素的操作都会被拒绝。

const c = document.createElement('canvas');
const ctx = c.getContext('2d');
const remote = new Image();
remote.onload = () => {
  ctx.drawImage(remote, 0, 0);
  try {
    const url = c.toDataURL('image/png');
    console.log('导出成功', url.slice(0, 30));
  } catch (e) {
    console.log('导出被拒绝：', e.name);
  }
};
remote.src = 'https://other-site.example.com/a.png';

这段做的是把跨域图片画进画布再尝试导出。预期结果（未在本机执行）：导出抛出安全错误，错误类型是 SecurityError，而不是返回空值。

修复方式有两种：让图片服务器返回允许跨域的响应头，并在脚本里显式声明跨域取值模式；或者由自己的服务端把图片取回转存后再使用。

const safe = new Image();
safe.crossOrigin = 'anonymous';
safe.onload = () => {
  ctx.drawImage(safe, 0, 0);
  console.log(c.toDataURL('image/png').slice(0, 30));
};
safe.src = 'https://other-site.example.com/a.png';

这段做的是在赋值地址之前声明跨域取值。注意顺序：这个属性必须写在地址赋值之前才生效，写反了等于没写。如果服务端没有返回对应的响应头，图片会直接加载失败走到错误分支。

⚠️ 注意：加了跨域声明之后，图片请求会变成带校验的请求。服务端没配合的话，原本能显示的图片反而会加载不出来，上线前要在真实环境验证一次。

四、常见失败分支与验证清单

4.1 回调里读到的宽高是 0

这说明图片还没解码完成或者加载失败了。先查错误分支有没有被触发，再确认地址是否可访问。宽高为 0 时做裁剪计算会得到全空白的结果。

4.2 同一段代码换一个页面就不触发

多半是路径解析基准变了。检查两个页面的地址层级是否相同、是否有一个页面加了 base 标签。

4.3 导出在开发环境正常，线上报错

开发环境图片通常是同源的，线上走了内容分发域名。这种情况下要把跨域头的配置纳入上线检查项。

4.4 验证清单

检查：打印属性取值与 HTML 属性取值，确认差异
运行：交换绑定与赋值的顺序，观察回调是否稳定触发
预期：先绑定后赋值时每次都触发；先赋值后绑定时缓存命中会漏触发
失败：顺序改对仍不触发，说明地址不可访问或已被拦截
修复：补上完成标记判断，并给失败分支加日志
验证：清空缓存后与带缓存各跑一次，两次结果一致才算修好

上面这些步骤做的是逐一排除三类原因。预期结果（未在本机执行）是三种场景下取值都能解释清楚；如果仍有无法解释的差异，把页面地址、base 标签和服务端响应头一起记录下来再定位。

HTML 属性取值与 DOM 属性取值的差异

总结

图片加载回调里地址"不对"，本质是三件事：路径被解析成绝对地址、缓存导致回调漏触发、跨域让画布被污染。三者都有明确的验证手段，不是玄学。

三条要点带走：

读属性拿到的是解析后的绝对地址，要原始写法就读 HTML 属性；
绑定回调必须写在赋值地址之前，并用完成标记兜住缓存命中的情况；
跨域图片要在赋值前声明跨域取值，服务端不配合就会加载失败。

下一步建议把"先绑定后赋值"写成团队里的固定写法，并在图片处理工具函数里统一加失败分支。语言细节可以对照 JavaScript 教程里的事件章节再确认一遍。

常见问题

Q：为什么我写的是相对路径，读出来却是完整网址？

A：因为赋值时浏览器会按当前页面地址把相对路径解析成绝对地址，读取属性返回的永远是解析后的结果。想拿原始字符串就读取 HTML 属性。

Q：图片加载回调为什么不触发？

A：最常见的原因是赋值地址写在了绑定回调之前，缓存命中的图片可能在绑定之前就加载完了。改成先绑定后赋值，并额外判断完成标记。

Q：怎么判断图片是不是已经加载完成？

A：读元素的完成标记。为真表示已经结束加载，此时要直接执行处理逻辑，不能再等回调触发。

Q：canvas 导出图片为什么会报安全错误？

A：跨域图片画进画布后画布被标记为已污染，读取像素和导出数据的操作会被浏览器拒绝。需要图片服务端返回允许跨域的响应头，并在赋值前声明跨域取值。

Q：加了跨域声明后图片反而加载不出来怎么办？

A：说明服务端没有返回对应的响应头。跨域声明会让请求带上校验，服务端不配合就会加载失败。要么让服务端补响应头，要么由自己的服务端转存图片。

延伸学习

想把图片与事件这块补扎实，可以按这个顺序来：

想系统过一遍语言基础，JavaScript 原生模块可以跟一遍；
读一篇相关笔记 canvas 跨域污染怎么解决，看别人踩过的坑；
想随手验证一段代码，用 JavaScript 在线运行跑一遍最快。