能，但需手动用dataset API读写：初始设data-retry-count="0"，onerror中parseInt读取、递增后赋值回dataset.retryCount，避免字符串拼接和NaN；每个img独立计数，天然隔离状态，便于SSR注入与调试。
data属性能存onerror次数吗
能，但得自己写逻辑控制——data-属性本身只是静态字符串，不会自动计数。浏览器触发 onerror 时，你需要手动读取、解析、递增、再写回该属性。
怎么在img的onerror里更新data-retry-count
关键是在事件处理函数里用 dataset API 读写。注意：初始值要设（比如 data-retry-count="0"），否则 dataset.retryCount 是 undefined，直接加 1 会变成 "NaN"。
常见写法：
<img src="broken.jpg"
data-retry-count="0"
onerror="handleImageError(this)">
handleImageError 函数示例：
立即学习“前端免费学习笔记（深入）”；
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
function handleImageError(img) {
const count = parseInt(img.dataset.retryCount) || 0;
if (count >= 2) return; // 最多重试2次
const nextSrc = img.src.replace(/\.jpg$/, `_v${count + 1}.jpg`);
img.dataset.retryCount = count + 1;
img.src = nextSrc;
}
-
parseInt必须，否则字符串拼接导致错误（如"0" + 1 === "01"） - 赋值给
img.dataset.retryCount会自动同步到 DOM 的data-retry-count属性 - 不要用
getAttribute/setAttribute，绕过dataset会丢失类型转换优势
为什么用data-retry-count而不是全局变量
因为一个页面可能有多个图片独立重试，全局变量无法区分来源。每个 <img alt="HTML如何用data属性记录onerror循环次数" > 自带 data- 属性，天然隔离状态。
另外，服务端渲染或 SSR 场景下，初始 data-retry-count 可由后端注入，前端直接读取，避免首次加载就丢状态。
- 多个图片共用同一套逻辑，无需为每个元素单独声明变量
- 调试时直接看 DOM 就能确认当前重试次数，比查闭包变量直观
- 如果后续要持久化（比如存 localStorage），从 dataset 读取也更统一
容易被忽略的边界情况
重试逻辑不是“设了 data 属性就自动生效”，真正容易出错的是异步和并发。
- 用户快速连续点击/刷新，可能触发多次
onerror，但dataset更新非原子操作，理论上存在竞态（实际极少，但高频率重试场景建议加锁标记） -
img.src赋新值后若仍 404，会再次触发onerror，必须检查count >= max再执行，否则无限循环 - 某些 CDN 或代理会返回 200 状态码的错误图（如 placeholder），此时
onerror不触发，data 属性也不会更新——这不属于 data 属性的问题，但常被误认为计数失效
真正难搞的从来不是怎么存，而是怎么判断“这次失败到底该不该重试”。data- 只是记账本，账怎么算，得靠你对业务失败原因的理解。
