浏览器缓存导致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。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 必须绑定 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，否则内存泄漏

实际调试时，Network 面板里看不到新请求，基本就是缓存或路径问题；能看到请求但状态码不是 200，就得查服务端路径或权限；请求成功但图片空白，重点盯 onload 是否漏绑、Blob 是否过早释放。