浏览器缓存导致src更新但图片不变，最有效解法是在url后添加时间戳或随机数，如/api/captcha?t=date.now()，并优先配置后端cache-control: no-cache响应头。
src改了但图片没变，大概率是浏览器缓存
浏览器看到相同的 URL 就直接用缓存，根本不会发新请求。你代码里 img.src = '/api/captcha' 执行了十次，只要 URL 完全一样，它就只加载第一次——后面九次都是“假装在加载”，实际啥也没干。
- 最简单有效的解法：加时间戳或随机数，比如
img.src = '/api/captcha?t=' + Date.now()或img.src = '/api/captcha?r=' + Math.random() - 别用
new Date().getTime()以外的低精度时间（如new Date().getSeconds()），一秒内多次点击会撞上相同值 - 如果后端支持 ETag 或 Cache-Control: no-cache，优先配响应头，比前端拼参数更干净
图片一闪而过又空白，可能是路径解析错了
相对路径在单页应用或深层路由下极易失效。比如当前页面 URL 是 /admin/user/edit/123，你写 img.src = 'assets/photo.jpg'，浏览器实际请求的是 /admin/user/edit/assets/photo.jpg，而不是你预期的根目录下的 /assets/photo.jpg。
- 一律用绝对路径开头：以
/起始，如img.src = '/assets/photo.jpg' - 避免
./、../这类相对写法，尤其在动态插入或路由跳转后创建的img元素上 - 用 Network 面板看真实请求地址，比猜路径靠谱得多
设置了src却读不到宽高，是因为没等加载完成
img.src = 'xxx' 是异步操作，JS 不会卡住等图下完。你紧接着访问 img.naturalWidth 或 img.width，拿到的几乎肯定是 0 或 undefined。
- 必须绑定
img.onload回调，在里面读尺寸、插入 DOM、触发后续逻辑 - 顺序不能错：先赋
src，再绑onload和onerror，最后才appendChild（否则可能错过事件） - 别在
onload外直接操作img的尺寸或complete属性，它们不可靠
Blob URL 图片不显示，常因 URL 被提前释放
用 URL.createObjectURL(blob) 生成的地址是临时的，一旦对应的 Blob 对象被 GC 或显式调用 URL.revokeObjectURL()，图片立刻变空白。
- 确保
img.src设置后，Blob实例在整个生命周期内都持有引用（比如存在变量里） - 不要一设完
src就马上revokeObjectURL；等img.onload触发后再 revoke - 如果频繁生成 Blob 图片，记得清理旧 URL，否则内存泄漏
onload 是否漏绑、Blob 是否过早释放。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
