onerror 在列表循环渲染中需为每个 img 实例单独绑定，框架中须用 @error（Vue）或 onError（React），SSR 需保留内联 onerror，动态创建应先设 onerror 再插入 DOM，fallback 优先用 base64 SVG。
onerror 在列表循环渲染中不能靠“写一次模板”就自动生效——它必须在每个 <img alt="HTML怎么在列表循环渲染时添加onerror" > 实例上独立绑定，且动态插入时极易错过首次错误。
Vue/React 中直接写 onerror 属性会失效
框架模板里写 <img :src="item.src" onerror="this.src='/placeholder.svg'; this.onerror=null" alt="HTML怎么在列表循环渲染时添加onerror" > 看似合理，但实际不触发：Vue 的 v-bind 和 React 的 JSX 会忽略原生事件属性，onerror 被当作文本而非 DOM 属性处理。框架层不会把它挂到真实 <img alt="HTML怎么在列表循环渲染时添加onerror" > 上。
- Vue 必须用
@error或v-on:error，并配合ref或onMounted手动绑定原生事件 - React 必须用
onError（注意大小写），且函数内要显式清空事件处理器：event.target.onerror = null - 服务端渲染（SSR）输出的静态 HTML 中，仍需保留内联
onerror，否则首屏加载失败时 JS 还没执行，兜底就断了
动态插入的 img 元素 onerror 绑定时机很关键
用 document.createElement('img') 创建后才 appendChild()，再补 img.onerror = ...，大概率来不及——图片请求在插入 DOM 后瞬间发起，错误已在绑定前发生。
- 正确做法：创建后立即赋值
img.onerror，再插入：const img = document.createElement('img'); img.onerror = () => { img.src = 'data:image/svg+xml;base64,...'; img.onerror = null; }; container.appendChild(img); - 更稳妥的是全局捕获：用
document.addEventListener('error', e => { if (e.target.tagName === 'IMG' && !e.target.dataset.fallbacked) { ... } }, true)，true表示捕获阶段，能命中所有后续插入的<img alt="HTML怎么在列表循环渲染时添加onerror" > - 必须加
dataset.fallbacked标记，否则同一张图被多次插入或重试时会重复替换
列表中 src 是变量时，onerror 里的 this.src 不能直接拼字符串
比如循环中写 onerror="this.src='fallback-' + this.dataset.id + '.png'"，这是无效的：内联 onerror 是纯字符串执行环境，不支持模板表达式，this.dataset.id 会报 undefined 或语法错误。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 静态 fallback 可用绝对路径：
onerror="this.src='/assets/blank.svg'; this.onerror=null" - 若需按 item 动态 fallback，必须用 JS 控制：给
<img alt="HTML怎么在列表循环渲染时添加onerror" >加data-fallback-src，在onerror回调里读取：onerror="this.src=this.dataset.fallbackSrc||'/fallback.svg'; this.onerror=null" - 避免用相对路径如
./fallback.png，本地开发file://协议下会被解析成系统根目录，90% 失败其实不是代码问题
真正可靠的 fallback 图必须零网络依赖
列表项多、并发加载强，备用图若也走 HTTP 请求，很容易因 CDN 故障、路径拼错、跨域缺失而二次失败，最终触发无限循环或白屏。
- 首选 base64 内联 SVG 占位图：
data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg== - 次选绝对路径的 CDN 托管图，但必须确保该地址在所有环境（包括本地
file://）都能访问，例如https://cdn.example.com/blank.svg - 禁用
srcset或sizes与onerror混用——onerror只响应最终选中的那个src，不感知响应式逻辑，降级后可能仍加载错尺寸
最易被忽略的一点：列表滚动中懒加载的图片，如果只靠 loading="lazy" + onerror，断网或 JS 加载失败时，src 若为空或占位图未预设，就会彻底白屏——必须让 src 始终指向一个可用资源，哪怕只是 1px GIF。
