最直接方式是用 document.getElementById 获取 IMG 元素后修改 src 属性；需确保 DOM 加载完成、ID 拼写正确且唯一，同时同步更新 srcset、监听加载状态，并优先使用 URL 构造器处理路径拼接。
用 document.getElementById 获取 IMG 元素再改 src 最直接
多数场景下，你不需要动 ID 属性本身，而是通过已有的 ID 找到 <img> 标签，然后更新它的 src。ID 是定位用的，不是路径容器。如果 HTML 里写了 <img id="banner">，JS 就该写 document.getElementById("banner").src = "new.jpg"。
常见错误是拼错 ID 字符串，或在 DOM 加载完成前就执行脚本——这时 getElementById 返回 null，后续赋值会报 Cannot set property 'src' of null。
- 确保脚本放在
</body>前，或监听DOMContentLoaded - ID 值区分大小写，且不能含空格、点号等特殊字符（哪怕 HTML 里没报错，JS 也可能取不到）
- 路径建议用相对路径或完整 URL；本地文件协议下（
file://）部分浏览器会因安全策略拒绝加载
需要动态生成 ID？先确认是否真有必要
给 <img> 设置或修改 id 属性本身，用 element.id = "newId" 或 element.setAttribute("id", "newId") 都可以。但除非你在做组件复用、事件委托绑定、或配合 CSS 动态样式，否则没必要频繁改 ID。
容易踩的坑：多个元素被设成同一个 ID，破坏 HTML 唯一性约束，导致 getElementById 只返回第一个，CSS 选择器行为异常，甚至影响无障碍读屏。
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- 用
dataset存业务标识更安全，比如img.dataset.itemId = "123" - 若必须批量管理图片，优先用 class +
querySelectorAll，而非靠 ID 循环改 - 改 ID 后，之前用旧 ID 绑定的事件监听器不会自动迁移，得手动重绑或用事件委托
srcset 和 sizes 也要同步更新，不然响应式失效
只改 src 不碰 srcset，会导致高 DPR 设备（如 iPhone）仍加载旧图，或者媒体查询匹配失败后 fallback 图不生效。
如果你用 JS 切换图片，尤其是适配不同屏幕尺寸时，srcset 必须和 src 保持语义一致：
img.src = "/images/photo@2x.jpg"; img.srcset = "/images/photo.jpg 1x, /images/photo@2x.jpg 2x";
-
srcset值是字符串，格式严格：逗号分隔，每段含路径和描述符（2x或(min-width: 768px)） - 修改
srcset后，浏览器不一定立刻重新下载资源——取决于缓存策略和当前视口宽度 - 服务端渲染页面中，慎用 JS 覆盖初始
srcset，可能造成重复请求或 CLS（布局偏移）
路径拼接出错？优先用 URL 构造器而不是字符串拼接
用户上传头像、CDN 切换、环境变量注入等场景，常要拼路径。手拼 "https://" + domain + "/img/" + id + ".png" 容易漏斜杠、多斜杠、编码错误。
现代浏览器支持 new URL()，能自动归一化路径：
const base = "https://cdn.example.com/images/";
const url = new URL("avatar-123.png", base);
img.src = url.toString(); // → "https://cdn.example.com/images/avatar-123.png"
-
URL()会处理../、//、空格编码等边界情况，比正则或replace更可靠 - Node.js 环境需用
url.resolve()或第三方库（如path.join仅适用于文件系统路径） - 注意：部分老旧安卓 WebView 不支持
URL构造器，需检查兼容性或加 polyfill
load 或 error 事件，导致图片挂了也不感知。要不要加 loading 占位、失败回退逻辑，得看业务容忍度。 
