直接改 src 属性是最简单有效的方式：获取 img 元素后赋值 img.src = 'new.jpg' 即刻触发加载，无需 setAttribute 或等待；需确保 DOM 就绪、ID 准确存在且路径正确，避免 null 错误或 404。

直接改 src 属性是最简单有效的方式

浏览器中图片显示源由 <img> 标签的 src 属性决定，只要 JS 能拿到对应元素，就能实时替换。不需要重新创建节点、也不用操作 DOM 树结构。

常见错误是误以为要调用 setAttribute 或等待加载完成才敢改——其实直接赋值 img.src = 'new.jpg' 就会立即触发加载，且兼容所有现代浏览器。

• 确保目标 <img id="myImg"> 已存在于页面中（脚本执行时 DOM 已就绪，或把脚本放 </body> 前）
• 避免写成 document.getElementById('myImg').src = 'path/to/'; —— 路径末尾多斜杠会导致 404
• 相对路径以当前 HTML 文件位置为基准，不是 JS 文件位置
• 若新路径跨域且服务器未配 CORS，控制台会报 Failed to load resource: net::ERR_FAILED，但不会抛 JS 异常

用 id 获取元素前先检查是否存在

脚本执行时机不对或 ID 拼错，document.getElementById 会返回 null，接着调用 .src 就报 Cannot set property 'src' of null。这是最常卡住新手的地方。

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

• 加一层存在性判断：

  const img = document.getElementById('avatar');
  if (img) {
    img.src = '/images/user-2.jpg';
  }

• ID 区分大小写，'Avatar' 和 'avatar' 是两个不同元素
• 如果 ID 是动态生成的（如后端模板注入），确认渲染后实际 HTML 中该 ID 确实存在，可用 DevTools 的 Elements 面板 Ctrl+F 搜索验证

切换图片时想保留旧图缓存或预加载新图

直接改 src 会立刻中断旧请求、发起新请求。如果频繁切换（比如相册缩略图悬停），用户可能看到空白或闪烁。

• 预加载新图：创建一个临时 Image 对象，等 onload 触发后再改真实 <img> 的 src，避免白屏

  const preImg = new Image();
  preImg.onload = () => { document.getElementById('mainImg').src = preImg.src; };
  preImg.src = '/images/large-1.jpg';

• 浏览器本身会缓存已加载过的 src，所以第二次切回同一张图基本是秒出
• 不要在 onload 里重复设置 src，否则可能触发无限循环（尤其当新旧路径字符串相等但引用不同时）

注意 srcset 和 sizes 的同步问题

如果原 <img> 同时用了响应式属性（如 srcset），只改 src 不会影响它们，可能导致高 DPR 设备仍加载低清图。

• 若需完全接管，一并更新：

  const img = document.getElementById('heroImg');
  img.src = '/images/hero-1200w.jpg';
  img.srcset = '/images/hero-600w.jpg 600w, /images/hero-1200w.jpg 1200w';
  img.sizes = '(max-width: 768px) 600px, 1200px';

• 改 srcset 后，浏览器会根据当前视口和设备像素比自动选源，无需手动判断
• 如果只是简单换图且不关心响应式，忽略 srcset 即可，不影响基础显示

ID 是最轻量的定位方式，但也是最容易因拼写、时机、作用域出错的一环。真正难的从来不是“怎么换”，而是“换的时候有没有人正在看它”——比如图片正在做 CSS 动画、或被某个库监听了 load 事件。这些隐性依赖，得靠调试器里打断点、看 Network 请求、观察 Element 面板实时变化才能揪出来。