<p>data-* 属性应存图片 URL 或 ID 等原子值，命名全小写连字符，优先用 getAttribute 读取，避免存 JSON 或用于响应式状态，仅作静态元信息绑定。</p>
直接存图片 URL 或 ID 就行，但别存 base64、大 JSON 或二进制数据——data-* 属性只适合轻量、静态、非敏感的上下文信息。
data-* 存图片 URL 时怎么写才合法
HTML 中必须用全小写 + 连字符命名，值为字符串形式的 URL（或 ID、尺寸等原子字段）：
-
data-img-src="https://i.example.com/photo.jpg"✅ 合法，可被dataset.imgSrc读取 -
data-img-id="abc123"✅ 推荐，比 URL 更稳定（URL 可能含特殊字符、长度超限） -
data-img-width="800"✅ 数值语义需手动转：parseInt(el.dataset.imgWidth) -
data-imgSrc="..."❌ 浏览器忽略，不进 DOM，dataset.imgSrc永远是undefined -
data-img-url="..."✅ 合法，但 JS 里得用dataset.imgUrl（连字符后首字母大写）
读取图片信息时 getAttribute() 和 dataset 哪个更稳
优先用 getAttribute()，尤其当属性名不规范、含数字或需原始字符串时：
-
el.getAttribute('data-img-src')→ 直接返回你写的字符串，不转换、不静默失败 -
el.dataset.imgSrc→ 仅对data-img-src有效；data-img-2x对应dataset.img2x，但data-2x-img就完全访问不到 - 服务端渲染了
data-img-config='{"size":"lg","lazy":true}'？必须用getAttribute+JSON.parse()，且加try/catch - 想判断图片配置是否存在（不管值）？
el.hasAttribute('data-img-src')比'imgSrc' in el.dataset更可靠
图片懒加载/切换场景下 data-* 的典型用法
把图片元信息和 DOM 节点强绑定，避免额外查表或全局状态：
立即学习“前端免费学习笔记（深入）”；
- 列表项中：
<img data-img-id="post-789" data-img-placeholder="/placeholder.svg" />，点击加载时直接取el.dataset.imgId - 响应式图片：
<picture><source data-srcset="... 2x" media="(min-width: 768px)"></picture>—— 注意：这里用的是原生srcset，data-*仅用于 JS 控制逻辑，不参与浏览器原生解析 - 预加载提示：
<div data-img-prefetch="true"><img src="..."></div>，JS 检测到该属性就提前new Image().src = ... - 禁止用
data-img-json='{"src":"...","alt":"..."}'—— 既难维护，又易 XSS（若服务端未转义），拆成多个原子属性更安全
容易被忽略的坑：修改后 DOM 不更新、CSS 选不到、React/Vue 里失效
data-* 是静态快照，不是响应式状态：
-
el.dataset.imgSrc = 'new.jpg'不会改 DOM 属性，后续el.outerHTML仍显示旧值；必须用el.setAttribute('data-img-src', 'new.jpg') - CSS 选择器如
[data-img-src]只匹配初始 HTML 中存在的属性，JS 动态添加后不会触发重绘，也不影响样式计算 - 在 React 中写
<img data-img-id={id} />是 OK 的，但别指望它能替代useState；Vue 模板中同理，v-bind:data-img-id="id"可以，但别把它当响应式 source - 图片加载失败后想标记状态？不要改
data-img-status再靠 CSS 显示 fallback —— 应该用 class 切换，data-*只存初始意图，不存运行时状态
