浏览器缓存导致图片不更新，需加时间戳等参数破缓；上传后应将新URL或base64（带data:前缀）赋值给src；框架中需用key强制更新；须设置宽高和object-fit防闪烁。
图片更新时 src 属性没变，浏览器却没重新加载
这是最常见的情况：你用 JavaScript 修改了 <img> 的 src 属性，但值看起来一样（比如还是 "upload/avatar.jpg"），浏览器直接从缓存取图，旧图还在显示。根本原因不是代码没执行，而是缓存策略生效了。
解决办法是强制打破缓存，给 URL 加上唯一查询参数：
- 用时间戳：
img.src = "upload/avatar.jpg?t=" + Date.now(); - 用随机数（适合非关键场景）：
img.src = "upload/avatar.jpg?r=" + Math.random(); - 更稳妥的做法是服务端返回文件内容哈希（如
avatar.a1b2c3.jpg），这样连文件名都变了，无需额外参数
用 FormData 上传新图后，如何让 img 标签立刻显示新内容
上传成功后不能只刷新页面或跳转——用户体验断层。应该在 fetch 或 XMLHttpRequest 的响应处理中，把服务端返回的新图片 URL（或 base64 数据）赋给 img.src。
注意两个易错点：
立即学习“前端免费学习笔记（深入）”；
- 服务端返回的是相对路径（如
"uploads/2024/11/new.jpg"），前端拼接时要确认当前页面 URL 基准是否正确，建议统一用绝对路径或以/开头的根相对路径 - 如果服务端返回的是 base64 字符串，必须加上完整的 data URL 前缀：
img.src = "data:image/jpeg;base64," + base64String;，漏掉前缀会导致空白 - 上传过程中可临时设置
img.src为 loading 占位图，避免闪白
Vue/React 等框架里图片更新不触发视图重绘
框架会做 diff 和缓存优化，如果新旧 src 字符串完全一致（哪怕文件内容已变），它可能跳过 DOM 更新。这不是 bug，是预期行为。
应对方式取决于框架：
- Vue：用
v-bind:key强制替换节点，例如<img :src="currentSrc" :key="imageVersion">，上传成功后执行imageVersion++ - React：同理，在
src外加一个无关但变化的key，如<img src={src} key={Date.now()} />（生产环境建议用上传时间戳或 ID） - 纯 JS 操作 DOM 时不存在这个问题，但要注意不要重复添加相同
src导致无效果
图片更新后尺寸错乱或闪烁
新图宽高和旧图不一致时，若容器没有固定尺寸或未设 object-fit，容易出现布局抖动、文字重排甚至滚动条闪现。
预防措施很简单，但常被跳过：
- 给
<img>设置明确的width和height（可以是 CSS 类，也可以是内联 style） - 用
object-fit: cover或contain控制缩放行为，避免拉伸变形 - 上传前先用
URL.createObjectURL(file)创建临时预览地址，提前读取尺寸并预留空间，再替换成正式 URL
真正麻烦的是异步加载+尺寸未知+服务端返回无宽高信息的组合，这时候得靠懒加载库或手动监听 load 事件再调整容器，而不是指望一次赋值就搞定。
