动态设置 img.src 未更新或报404，主因是路径解析基于当前url而非html位置，spa中相对路径易错；应改用根相对路径（如/images/1.jpg），监听error事件并降级备用图，配合data-src管理真实地址、decoding="async"防阻塞，确保视觉平滑。
动态设置 img.src 时为什么图片不更新或报404
直接赋值 img.src = "new.jpg" 后没反应，大概率是路径错误或浏览器缓存了旧响应。相对路径在 SPA 中尤其危险——src 解析基于当前 URL，不是 HTML 文件位置；比如路由从 /dashboard 跳到 /user/profile，src="images/avatar.png" 就会变成请求 /user/images/avatar.png。
解决方法：
- 统一用绝对路径或根相对路径：
src="/images/avatar.png"（开头带/） - 加时间戳防缓存（仅调试用）：
img.src = "avatar.png?t=" + Date.now() - 赋值后监听
load和error事件，确认是否真加载失败：img.addEventListener("error", () => console.error("图片加载失败:", img.src))
用 dataset 管理待加载图源比硬编码更可靠
把真实地址存在 data-src，初始 src 指向占位图或留空，能避免首屏误加载、也方便后续按需触发。尤其适合卡片列表、瀑布流这类大量图片的场景。
示例结构：
@@##@@
关键点：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
data-src可以是动态 API 地址、CDN 带参 URL（如https://cdn.example.com/img.jpg?w=400&h=400&fit=cover），src则始终可控 - 切换时别忘了清掉
data-src：img.src = img.dataset.src; delete img.dataset.src;，否则滚动中重复触发 - 服务端返回 404 时，前端应降级到备用图：
img.addEventListener("error", () => img.src = "/fallback.jpg")
loading="lazy" 和动态 src 一起用会冲突吗
会。原生 loading="lazy" 只在元素首次插入 DOM 时生效；如果你先插入一个 src="" 的 img，再 later 补上 src，浏览器不会重新触发懒加载逻辑——它认为这张图“已经处理过了”。
正确做法：
- 需要懒加载，就让
img带着有效src一起进 DOM，哪怕只是 placeholder；再用IntersectionObserver替换为真实图源 - 完全不想首屏加载，就初始不渲染
img标签，等进入视口后再appendChild完整节点（含src和loading="lazy"） - 禁用原生懒加载：
loading="eager"，自己全权控制——适合需要预加载、错峰请求或带权限校验的图源
批量替换图源时要注意 decode() 阻塞渲染
高频切换图片（比如相册缩略图预览、实时摄像头帧）时，直接设 src 可能导致页面卡顿。因为浏览器默认同步解码图像，大图（尤其是 WebP/AVIF）会在主线程阻塞布局。
缓解方式：
- 调用
img.decode().then(() => img.classList.add("loaded"))，确保解码完成再显示，避免闪烁 - 对非关键图，加
decoding="async"属性：<img src="/placeholder.svg" alt="用户头像">，告诉浏览器可异步解码 - 极端情况（如视频帧），改用
createObjectURL(blob)+revokeObjectURL管理内存，避免 URL 积压
decoding 控制、decode() 回调、错误兜底，这些细节漏掉任一环，动态管理就变成视觉灾难。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
