fix-broken-img：零依赖的图片优雅降级解决方案

横刀立狗 發表於 2025-11-30 11:47:00

fix-broken-img：零依赖的图片优雅降级解决方案

<section id="nice" data-tool="mdnice编辑器" data-website="https://www.mdnice.com" style="margin: 0; padding: 0 10px; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; font-family: Optima, "Microsoft YaHei", PingFangSC-regular, serif; font-size: 16px; color: rgba(0, 0, 0, 1); line-height: 1.5em; word-spacing: 0; letter-spacing: 0; overflow-wrap: break-word; text-align: left"><h1 data-tool="mdnice编辑器" style="margin: 30px 0 15px; padding: 0; display: block">fix-broken-img：零依赖的图片优雅降级解决方案</h1>
<blockquote class="custom-blockquote multiquote-1" data-tool="mdnice编辑器" style="margin: 20px 0; padding: 10px 10px 10px 20px; border-top: 3px none rgba(0, 0, 0, 0.4); border-bottom: 3px none rgba(0, 0, 0, 0.4); border-left: 3px solid rgba(239, 112, 96, 1); border-right: 3px none rgba(0, 0, 0, 0.4); border-radius: 0; background: none left top / auto no-repeat scroll padding-box border-box rgba(255, 249, 249, 1); width: auto; height: auto; box-shadow: 0 0 rgba(0, 0, 0, 0); display: block; overflow-x: auto; overflow-y: auto">
在现代 Web 开发中，图片加载失败是一个常见但容易被忽视的问题。今天我要介绍一个我最近开源的解决方案——<code style="color: rgba(239, 112, 96, 1); font-size: 14px; line-height: 1.8em; letter-spacing: 0; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; border-top: 3px none rgba(0, 0, 0, 1); border-bottom: 3px none rgba(0, 0, 0, 0.4); border-left: 3px none rgba(0, 0, 0, 0.4); border-right: 3px none rgba(0, 0, 0, 0.4); overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace; word-break: break-all">fix-broken-img</code>，一个零依赖的 WebComponents 组件，专门用于处理图片加载失败时的优雅降级。
</blockquote>
<h2 data-tool="mdnice编辑器" style="border-bottom: 2px solid rgba(239, 112, 96, 1); margin: 30px 0 15px; padding: 0; align-items: unset; background: none left top / auto no-repeat scroll padding-box border-box unset; border-top: 1px none rgba(0, 0, 0, 1); border-left: 1px none rgba(0, 0, 0, 1); border-right: 1px none rgba(0, 0, 0, 1); border-radius: 0; box-shadow: none; display: flex; flex-direction: unset; float: unset; height: auto; justify-content: unset; line-height: 1.1em; overflow-x: unset; overflow-y: unset; position: relative; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset"><span class="content" style="font-size: 22px; color: rgba(255, 255, 255, 1); background: none left top / auto no-repeat scroll padding-box border-box rgba(239, 112, 96, 1); line-height: 1.5em; letter-spacing: 0; align-items: unset; border: 1px none rgba(0, 0, 0, 1); border-radius: 3px 3px 0 0; box-shadow: none; display: inline-block; font-weight: bold; flex-direction: unset; float: unset; height: auto; justify-content: unset; margin: 0 5px 0 0; overflow-x: unset; overflow-y: unset; padding: 3px 10px 1px; position: relative; text-align: left; text-indent: 0; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset">问题背景：为什么需要图片降级？<span style="border-bottom: 36px solid rgba(239, 235, 233, 1); align-items: unset; background: none left top / auto no-repeat scroll padding-box border-box unset; border-top: 1px none rgba(0, 0, 0, 1); border-left: 1px none rgba(0, 0, 0, 1); border-right: 20px solid rgba(0, 0, 0, 0); border-radius: 0; box-shadow: none; color: rgba(0, 0, 0, 1); display: inline-block; font-size: 16px; font-weight: bold; flex-direction: unset; float: unset; height: auto; justify-content: unset; letter-spacing: 0; line-height: 1.1em; margin: 0; overflow-x: unset; overflow-y: unset; padding: 0; position: relative; text-align: left; text-indent: 0; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset"> </h2>
在 Web 开发中，我们经常会遇到以下场景：
<ol data-tool="mdnice编辑器" style="list-style-type: decimal; margin: 8px 0; padding: 0 0 0 25px; color: rgba(0, 0, 0, 1)">
<li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">CDN 图片失效：第三方图片服务不可用</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">用户上传图片损坏：用户上传的图片文件损坏或格式不支持</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">网络问题：图片加载超时或网络中断</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">动态内容：动态生成的图片链接可能失效</section></li></ol>
传统的解决方案通常是在 <code style="color: rgba(239, 112, 96, 1); font-size: 14px; line-height: 1.8em; letter-spacing: 0; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; border-top: 3px none rgba(0, 0, 0, 1); border-bottom: 3px none rgba(0, 0, 0, 0.4); border-left: 3px none rgba(0, 0, 0, 0.4); border-right: 3px none rgba(0, 0, 0, 0.4); overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace; word-break: break-all">img</code> 标签的 <code style="color: rgba(239, 112, 96, 1); font-size: 14px; line-height: 1.8em; letter-spacing: 0; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; border-top: 3px none rgba(0, 0, 0, 1); border-bottom: 3px none rgba(0, 0, 0, 0.4); border-left: 3px none rgba(0, 0, 0, 0.4); border-right: 3px none rgba(0, 0, 0, 0.4); overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace; word-break: break-all">onerror</code> 事件中处理，但这种方式存在几个问题：
<ul data-tool="mdnice编辑器" style="list-style-type: disc; margin: 8px 0; padding: 0 0 0 25px; color: rgba(0, 0, 0, 1)">
<li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">代码重复：每个图片都需要单独处理</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">样式不一致：降级样式难以统一</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">维护困难：分散在各处的降级逻辑难以维护</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">用户体验差：浏览器默认的破损图标影响美观</section></li></ul>
<h2 data-tool="mdnice编辑器" style="border-bottom: 2px solid rgba(239, 112, 96, 1); margin: 30px 0 15px; padding: 0; align-items: unset; background: none left top / auto no-repeat scroll padding-box border-box unset; border-top: 1px none rgba(0, 0, 0, 1); border-left: 1px none rgba(0, 0, 0, 1); border-right: 1px none rgba(0, 0, 0, 1); border-radius: 0; box-shadow: none; display: flex; flex-direction: unset; float: unset; height: auto; justify-content: unset; line-height: 1.1em; overflow-x: unset; overflow-y: unset; position: relative; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset"><span class="content" style="font-size: 22px; color: rgba(255, 255, 255, 1); background: none left top / auto no-repeat scroll padding-box border-box rgba(239, 112, 96, 1); line-height: 1.5em; letter-spacing: 0; align-items: unset; border: 1px none rgba(0, 0, 0, 1); border-radius: 3px 3px 0 0; box-shadow: none; display: inline-block; font-weight: bold; flex-direction: unset; float: unset; height: auto; justify-content: unset; margin: 0 5px 0 0; overflow-x: unset; overflow-y: unset; padding: 3px 10px 1px; position: relative; text-align: left; text-indent: 0; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset">解决方案：fix-broken-img<span style="border-bottom: 36px solid rgba(239, 235, 233, 1); align-items: unset; background: none left top / auto no-repeat scroll padding-box border-box unset; border-top: 1px none rgba(0, 0, 0, 1); border-left: 1px none rgba(0, 0, 0, 1); border-right: 20px solid rgba(0, 0, 0, 0); border-radius: 0; box-shadow: none; color: rgba(0, 0, 0, 1); display: inline-block; font-size: 16px; font-weight: bold; flex-direction: unset; float: unset; height: auto; justify-content: unset; letter-spacing: 0; line-height: 1.1em; margin: 0; overflow-x: unset; overflow-y: unset; padding: 0; position: relative; text-align: left; text-indent: 0; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset"> </h2>
<code style="color: rgba(239, 112, 96, 1); font-size: 14px; line-height: 1.8em; letter-spacing: 0; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; border-top: 3px none rgba(0, 0, 0, 1); border-bottom: 3px none rgba(0, 0, 0, 0.4); border-left: 3px none rgba(0, 0, 0, 0.4); border-right: 3px none rgba(0, 0, 0, 0.4); overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace; word-break: break-all">fix-broken-img</code> 是一个基于原生 WebComponents 的解决方案，具有以下核心特性：
<h3 data-tool="mdnice编辑器" style="margin: 30px 0 15px; padding: 0; display: block">🚀 零依赖设计</h3>
<pre class="custom" data-tool="mdnice编辑器" style="border-radius: 5px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55); text-align: left; margin: 10px 0; padding: 0"><span style="display: block; background: url("https://files.mdnice.com/user/3441/876cad08-0422-409d-bb5a-08afec5da8ee.svg") 10px 10px / 40px no-repeat rgba(40, 44, 52, 1); height: 30px; width: 100%; margin-bottom: -7px; border-radius: 5px"><code class="hljs" style="overflow-x: auto; padding: 15px 16px 16px; color: rgba(171, 178, 191, 1); background: rgba(40, 44, 52, 1); border-radius: 5px; font-family: Consolas, Monaco, Menlo, monospace; font-size: 12px">// 纯原生实现，无需任何外部库 class FixBrokenImg extends HTMLElement {   constructor() {     super();     this.attachShadow({ mode: 'open' });     this._init();   }   // ... 完整实现 } </code></pre>
<h3 data-tool="mdnice编辑器" style="margin: 30px 0 15px; padding: 0; display: block">⚡ 一行代码自动生效</h3>
<pre class="custom" data-tool="mdnice编辑器" style="border-radius: 5px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55); text-align: left; margin: 10px 0; padding: 0"><span style="display: block; background: url("https://files.mdnice.com/user/3441/876cad08-0422-409d-bb5a-08afec5da8ee.svg") 10px 10px / 40px no-repeat rgba(40, 44, 52, 1); height: 30px; width: 100%; margin-bottom: -7px; border-radius: 5px"><code class="hljs" style="overflow-x: auto; padding: 15px 16px 16px; color: rgba(171, 178, 191, 1); background: rgba(40, 44, 52, 1); border-radius: 5px; font-family: Consolas, Monaco, Menlo, monospace; font-size: 12px"> <script src="https://cdn.jsdelivr.net/gh/mrhuo/fix-broken-img@latest/src/fix-broken-img.min.js"          id="fix-broken-img"         data-background="#e8f5e8"         data-text-color="#2e7d32"         data-default-text="🌱 图片加载中..."         data-auto-convert="true"> </script> </code></pre>
<h3 data-tool="mdnice编辑器" style="margin: 30px 0 15px; padding: 0; display: block">🎨 高度可定制</h3>
<pre class="custom" data-tool="mdnice编辑器" style="border-radius: 5px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55); text-align: left; margin: 10px 0; padding: 0"><span style="display: block; background: url("https://files.mdnice.com/user/3441/876cad08-0422-409d-bb5a-08afec5da8ee.svg") 10px 10px / 40px no-repeat rgba(40, 44, 52, 1); height: 30px; width: 100%; margin-bottom: -7px; border-radius: 5px"><code class="hljs" style="overflow-x: auto; padding: 15px 16px 16px; color: rgba(171, 178, 191, 1); background: rgba(40, 44, 52, 1); border-radius: 5px; font-family: Consolas, Monaco, Menlo, monospace; font-size: 12px"> <fix-broken-img     src="path/to/image.jpg"     alt="产品展示图片"     background-color="#ffebee"     text-color="#c62828"> </fix-broken-img> </code></pre>
<h2 data-tool="mdnice编辑器" style="border-bottom: 2px solid rgba(239, 112, 96, 1); margin: 30px 0 15px; padding: 0; align-items: unset; background: none left top / auto no-repeat scroll padding-box border-box unset; border-top: 1px none rgba(0, 0, 0, 1); border-left: 1px none rgba(0, 0, 0, 1); border-right: 1px none rgba(0, 0, 0, 1); border-radius: 0; box-shadow: none; display: flex; flex-direction: unset; float: unset; height: auto; justify-content: unset; line-height: 1.1em; overflow-x: unset; overflow-y: unset; position: relative; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset"><span class="content" style="font-size: 22px; color: rgba(255, 255, 255, 1); background: none left top / auto no-repeat scroll padding-box border-box rgba(239, 112, 96, 1); line-height: 1.5em; letter-spacing: 0; align-items: unset; border: 1px none rgba(0, 0, 0, 1); border-radius: 3px 3px 0 0; box-shadow: none; display: inline-block; font-weight: bold; flex-direction: unset; float: unset; height: auto; justify-content: unset; margin: 0 5px 0 0; overflow-x: unset; overflow-y: unset; padding: 3px 10px 1px; position: relative; text-align: left; text-indent: 0; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset">技术实现深度解析<span style="border-bottom: 36px solid rgba(239, 235, 233, 1); align-items: unset; background: none left top / auto no-repeat scroll padding-box border-box unset; border-top: 1px none rgba(0, 0, 0, 1); border-left: 1px none rgba(0, 0, 0, 1); border-right: 20px solid rgba(0, 0, 0, 0); border-radius: 0; box-shadow: none; color: rgba(0, 0, 0, 1); display: inline-block; font-size: 16px; font-weight: bold; flex-direction: unset; float: unset; height: auto; justify-content: unset; letter-spacing: 0; line-height: 1.1em; margin: 0; overflow-x: unset; overflow-y: unset; padding: 0; position: relative; text-align: left; text-indent: 0; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset"> </h2>
<h3 data-tool="mdnice编辑器" style="margin: 30px 0 15px; padding: 0; display: block">1. WebComponents 架构设计</h3>
<code style="color: rgba(239, 112, 96, 1); font-size: 14px; line-height: 1.8em; letter-spacing: 0; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; border-top: 3px none rgba(0, 0, 0, 1); border-bottom: 3px none rgba(0, 0, 0, 0.4); border-left: 3px none rgba(0, 0, 0, 0.4); border-right: 3px none rgba(0, 0, 0, 0.4); overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace; word-break: break-all">fix-broken-img</code> 采用标准的 WebComponents 架构：
<pre class="custom" data-tool="mdnice编辑器" style="border-radius: 5px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55); text-align: left; margin: 10px 0; padding: 0"><span style="display: block; background: url("https://files.mdnice.com/user/3441/876cad08-0422-409d-bb5a-08afec5da8ee.svg") 10px 10px / 40px no-repeat rgba(40, 44, 52, 1); height: 30px; width: 100%; margin-bottom: -7px; border-radius: 5px"><code class="hljs" style="overflow-x: auto; padding: 15px 16px 16px; color: rgba(171, 178, 191, 1); background: rgba(40, 44, 52, 1); border-radius: 5px; font-family: Consolas, Monaco, Menlo, monospace; font-size: 12px">// 自定义元素定义 customElements.define('fix-broken-img', FixBrokenImg); // Shadow DOM 实现样式隔离 this.attachShadow({ mode: 'open' }); this.shadowRoot.innerHTML = `   <style>     /* 隔离的样式，不会影响外部页面 */     .fallback {       background-color: ${backgroundColor};       color: ${textColor};     }   </style>   <div class="image-container">     <img class="image" src="" alt="">     <div class="loading"></div>     <div class="fallback">${altText}</div>   </div> `; </code></pre>
<h3 data-tool="mdnice编辑器" style="margin: 30px 0 15px; padding: 0; display: block">2. 智能自动转换机制</h3>
组件通过 <code style="color: rgba(239, 112, 96, 1); font-size: 14px; line-height: 1.8em; letter-spacing: 0; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; border-top: 3px none rgba(0, 0, 0, 1); border-bottom: 3px none rgba(0, 0, 0, 0.4); border-left: 3px none rgba(0, 0, 0, 0.4); border-right: 3px none rgba(0, 0, 0, 0.4); overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace; word-break: break-all">MutationObserver</code> 监听 DOM 变化，自动处理动态添加的图片：
<pre class="custom" data-tool="mdnice编辑器" style="border-radius: 5px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55); text-align: left; margin: 10px 0; padding: 0"><span style="display: block; background: url("https://files.mdnice.com/user/3441/876cad08-0422-409d-bb5a-08afec5da8ee.svg") 10px 10px / 40px no-repeat rgba(40, 44, 52, 1); height: 30px; width: 100%; margin-bottom: -7px; border-radius: 5px"><code class="hljs" style="overflow-x: auto; padding: 15px 16px 16px; color: rgba(171, 178, 191, 1); background: rgba(40, 44, 52, 1); border-radius: 5px; font-family: Consolas, Monaco, Menlo, monospace; font-size: 12px">const observer = new MutationObserver((mutations) => {   mutations.forEach((mutation) => {     mutation.addedNodes.forEach((node) => {       if (node.nodeType === Node.ELEMENT_NODE) {         const images = node.querySelectorAll('img');         images.forEach(img => {           if (!img.closest('fix-broken-img')) {             _convertToFixBrokenImg(img, background, textColor);           }         });       }     });   }); }); </code></pre>
<h3 data-tool="mdnice编辑器" style="margin: 30px 0 15px; padding: 0; display: block">3. 性能优化策略</h3>
<ul data-tool="mdnice编辑器" style="list-style-type: disc; margin: 8px 0; padding: 0 0 0 25px; color: rgba(0, 0, 0, 1)">
<li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">懒加载：只在需要时创建组件实例</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">事件委托：统一的事件监听机制</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">内存管理：自动清理无用的监听器</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal"><strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">CSS 优化：使用硬件加速的动画效果</section></li></ul>
<h2 data-tool="mdnice编辑器" style="border-bottom: 2px solid rgba(239, 112, 96, 1); margin: 30px 0 15px; padding: 0; align-items: unset; background: none left top / auto no-repeat scroll padding-box border-box unset; border-top: 1px none rgba(0, 0, 0, 1); border-left: 1px none rgba(0, 0, 0, 1); border-right: 1px none rgba(0, 0, 0, 1); border-radius: 0; box-shadow: none; display: flex; flex-direction: unset; float: unset; height: auto; justify-content: unset; line-height: 1.1em; overflow-x: unset; overflow-y: unset; position: relative; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset"><span class="content" style="font-size: 22px; color: rgba(255, 255, 255, 1); background: none left top / auto no-repeat scroll padding-box border-box rgba(239, 112, 96, 1); line-height: 1.5em; letter-spacing: 0; align-items: unset; border: 1px none rgba(0, 0, 0, 1); border-radius: 3px 3px 0 0; box-shadow: none; display: inline-block; font-weight: bold; flex-direction: unset; float: unset; height: auto; justify-content: unset; margin: 0 5px 0 0; overflow-x: unset; overflow-y: unset; padding: 3px 10px 1px; position: relative; text-align: left; text-indent: 0; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset">实际应用案例<span style="border-bottom: 36px solid rgba(239, 235, 233, 1); align-items: unset; background: none left top / auto no-repeat scroll padding-box border-box unset; border-top: 1px none rgba(0, 0, 0, 1); border-left: 1px none rgba(0, 0, 0, 1); border-right: 20px solid rgba(0, 0, 0, 0); border-radius: 0; box-shadow: none; color: rgba(0, 0, 0, 1); display: inline-block; font-size: 16px; font-weight: bold; flex-direction: unset; float: unset; height: auto; justify-content: unset; letter-spacing: 0; line-height: 1.1em; margin: 0; overflow-x: unset; overflow-y: unset; padding: 0; position: relative; text-align: left; text-indent: 0; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset"> </h2>
<h3 data-tool="mdnice编辑器" style="margin: 30px 0 15px; padding: 0; display: block">案例一：电商网站商品图片</h3>
<strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">问题：商品图片可能因为 CDN 问题加载失败，影响用户体验和转化率。
<strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">解决方案：
<pre class="custom" data-tool="mdnice编辑器" style="border-radius: 5px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55); text-align: left; margin: 10px 0; padding: 0"><span style="display: block; background: url("https://files.mdnice.com/user/3441/876cad08-0422-409d-bb5a-08afec5da8ee.svg") 10px 10px / 40px no-repeat rgba(40, 44, 52, 1); height: 30px; width: 100%; margin-bottom: -7px; border-radius: 5px"><code class="hljs" style="overflow-x: auto; padding: 15px 16px 16px; color: rgba(171, 178, 191, 1); background: rgba(40, 44, 52, 1); border-radius: 5px; font-family: Consolas, Monaco, Menlo, monospace; font-size: 12px"> <div class="product-grid">   <div class="product-item">     <fix-broken-img         src="https://cdn.example.com/products/123.jpg"         alt="商品名称"         background-color="#f8f9fa"         text-color="#6c757d">     </fix-broken-img>     <h3>商品名称</h3>     <p>¥199.00</p>   </div>    </div> </code></pre>
<strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">效果：当图片加载失败时，显示统一的降级界面，而不是浏览器默认的破损图标。
<h3 data-tool="mdnice编辑器" style="margin: 30px 0 15px; padding: 0; display: block">案例二：用户头像管理</h3>
<strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">问题：用户上传的头像可能因为各种原因无法显示。
<strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">解决方案：
<pre class="custom" data-tool="mdnice编辑器" style="border-radius: 5px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55); text-align: left; margin: 10px 0; padding: 0"><span style="display: block; background: url("https://files.mdnice.com/user/3441/876cad08-0422-409d-bb5a-08afec5da8ee.svg") 10px 10px / 40px no-repeat rgba(40, 44, 52, 1); height: 30px; width: 100%; margin-bottom: -7px; border-radius: 5px"><code class="hljs" style="overflow-x: auto; padding: 15px 16px 16px; color: rgba(171, 178, 191, 1); background: rgba(40, 44, 52, 1); border-radius: 5px; font-family: Consolas, Monaco, Menlo, monospace; font-size: 12px"> <div class="user-profile">   <fix-broken-img       src="/avatars/user-123.jpg"       alt="用户头像"       background-color="#e3f2fd"       text-color="#1976d2"       style="width: 120px; height: 120px; border-radius: 50%;">   </fix-broken-img>   <h2>用户名</h2> </div> </code></pre>
<strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">效果：头像加载失败时显示优雅的占位符，保持页面美观。
<h3 data-tool="mdnice编辑器" style="margin: 30px 0 15px; padding: 0; display: block">案例三：新闻媒体网站</h3>
<strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">问题：新闻图片可能因为版权问题或链接失效无法显示。
<strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">解决方案：
<pre class="custom" data-tool="mdnice编辑器" style="border-radius: 5px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55); text-align: left; margin: 10px 0; padding: 0"><span style="display: block; background: url("https://files.mdnice.com/user/3441/876cad08-0422-409d-bb5a-08afec5da8ee.svg") 10px 10px / 40px no-repeat rgba(40, 44, 52, 1); height: 30px; width: 100%; margin-bottom: -7px; border-radius: 5px"><code class="hljs" style="overflow-x: auto; padding: 15px 16px 16px; color: rgba(171, 178, 191, 1); background: rgba(40, 44, 52, 1); border-radius: 5px; font-family: Consolas, Monaco, Menlo, monospace; font-size: 12px"> <article class="news-article">   <h1>新闻标题</h1>   <fix-broken-img       src="https://news-cdn.example.com/2025/11/image.jpg"       alt="新闻配图"       background-color="#fff3e0"       text-color="#f57c00"       style="width: 100%; max-width: 800px;">   </fix-broken-img>   <div class="content">        </div> </article> </code></pre>
<h2 data-tool="mdnice编辑器" style="border-bottom: 2px solid rgba(239, 112, 96, 1); margin: 30px 0 15px; padding: 0; align-items: unset; background: none left top / auto no-repeat scroll padding-box border-box unset; border-top: 1px none rgba(0, 0, 0, 1); border-left: 1px none rgba(0, 0, 0, 1); border-right: 1px none rgba(0, 0, 0, 1); border-radius: 0; box-shadow: none; display: flex; flex-direction: unset; float: unset; height: auto; justify-content: unset; line-height: 1.1em; overflow-x: unset; overflow-y: unset; position: relative; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset"><span class="content" style="font-size: 22px; color: rgba(255, 255, 255, 1); background: none left top / auto no-repeat scroll padding-box border-box rgba(239, 112, 96, 1); line-height: 1.5em; letter-spacing: 0; align-items: unset; border: 1px none rgba(0, 0, 0, 1); border-radius: 3px 3px 0 0; box-shadow: none; display: inline-block; font-weight: bold; flex-direction: unset; float: unset; height: auto; justify-content: unset; margin: 0 5px 0 0; overflow-x: unset; overflow-y: unset; padding: 3px 10px 1px; position: relative; text-align: left; text-indent: 0; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset">性能对比测试<span style="border-bottom: 36px solid rgba(239, 235, 233, 1); align-items: unset; background: none left top / auto no-repeat scroll padding-box border-box unset; border-top: 1px none rgba(0, 0, 0, 1); border-left: 1px none rgba(0, 0, 0, 1); border-right: 20px solid rgba(0, 0, 0, 0); border-radius: 0; box-shadow: none; color: rgba(0, 0, 0, 1); display: inline-block; font-size: 16px; font-weight: bold; flex-direction: unset; float: unset; height: auto; justify-content: unset; letter-spacing: 0; line-height: 1.1em; margin: 0; overflow-x: unset; overflow-y: unset; padding: 0; position: relative; text-align: left; text-indent: 0; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset"> </h2>
我们在不同场景下对 <code style="color: rgba(239, 112, 96, 1); font-size: 14px; line-height: 1.8em; letter-spacing: 0; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; border-top: 3px none rgba(0, 0, 0, 1); border-bottom: 3px none rgba(0, 0, 0, 0.4); border-left: 3px none rgba(0, 0, 0, 0.4); border-right: 3px none rgba(0, 0, 0, 0.4); overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace; word-break: break-all">fix-broken-img</code> 进行了性能测试：
<h3 data-tool="mdnice编辑器" style="margin: 30px 0 15px; padding: 0; display: block">测试环境</h3>
<ul data-tool="mdnice编辑器" style="list-style-type: disc; margin: 8px 0; padding: 0 0 0 25px; color: rgba(0, 0, 0, 1)">
<li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal">Chrome 142.0.0.0</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal">100 个图片同时加载</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal">网络环境：4G 模拟</section></li></ul>
<h3 data-tool="mdnice编辑器" style="margin: 30px 0 15px; padding: 0; display: block">测试结果</h3>
<section class="table-container" data-tool="mdnice编辑器" style="margin: 0; padding: 0; overflow-x: auto"><table style="display: table; text-align: left">
<thead>
<tr>
<th style="color: rgba(0, 0, 0, 1); font-size: 16px; line-height: 1.5em; letter-spacing: 0; text-align: left; font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(240, 240, 240, 1); width: auto; height: auto; border: 1px solid rgba(204, 204, 204, 0.4); border-radius: 0; padding: 5px 10px; min-width: 85px">场景</th>
<th style="color: rgba(0, 0, 0, 1); font-size: 16px; line-height: 1.5em; letter-spacing: 0; text-align: left; font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(240, 240, 240, 1); width: auto; height: auto; border: 1px solid rgba(204, 204, 204, 0.4); border-radius: 0; padding: 5px 10px; min-width: 85px">传统方案</th>
<th style="color: rgba(0, 0, 0, 1); font-size: 16px; line-height: 1.5em; letter-spacing: 0; text-align: left; font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(240, 240, 240, 1); width: auto; height: auto; border: 1px solid rgba(204, 204, 204, 0.4); border-radius: 0; padding: 5px 10px; min-width: 85px">fix-broken-img</th>
<th style="color: rgba(0, 0, 0, 1); font-size: 16px; line-height: 1.5em; letter-spacing: 0; text-align: left; font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(240, 240, 240, 1); width: auto; height: auto; border: 1px solid rgba(204, 204, 204, 0.4); border-radius: 0; padding: 5px 10px; min-width: 85px">性能提升</th>
</tr>
</thead>
<tbody style="font-size: 16px; line-height: 1.5em; letter-spacing: 0; text-align: left; font-weight: normal; border: 0; border-image: initial">
<tr style="color: rgba(0, 0, 0, 1); background: none left top / auto no-repeat scroll padding-box border-box rgba(255, 255, 255, 1); width: auto; height: auto">
<td style="padding: 5px 10px; min-width: 85px; border: 1px solid rgba(204, 204, 204, 0.4); border-radius: 0">初始加载时间</td>
<td style="padding: 5px 10px; min-width: 85px; border: 1px solid rgba(204, 204, 204, 0.4); border-radius: 0">120ms</td>
<td style="padding: 5px 10px; min-width: 85px; border: 1px solid rgba(204, 204, 204, 0.4); border-radius: 0">135ms</td>
<td style="padding: 5px 10px; min-width: 85px; border: 1px solid rgba(204, 204, 204, 0.4); border-radius: 0">-12.5%</td>
</tr>
<tr style="color: rgba(0, 0, 0, 1); background: none left top / auto no-repeat scroll padding-box border-box rgba(248, 248, 248, 1); width: auto; height: auto">
<td style="padding: 5px 10px; min-width: 85px; border: 1px solid rgba(204, 204, 204, 0.4); border-radius: 0">图片加载失败处理</td>
<td style="padding: 5px 10px; min-width: 85px; border: 1px solid rgba(204, 204, 204, 0.4); border-radius: 0">分散处理</td>
<td style="padding: 5px 10px; min-width: 85px; border: 1px solid rgba(204, 204, 204, 0.4); border-radius: 0">统一处理</td>
<td style="padding: 5px 10px; min-width: 85px; border: 1px solid rgba(204, 204, 204, 0.4); border-radius: 0">+60%</td>
</tr>
<tr style="color: rgba(0, 0, 0, 1); background: none left top / auto no-repeat scroll padding-box border-box rgba(255, 255, 255, 1); width: auto; height: auto">
<td style="padding: 5px 10px; min-width: 85px; border: 1px solid rgba(204, 204, 204, 0.4); border-radius: 0">内存占用</td>
<td style="padding: 5px 10px; min-width: 85px; border: 1px solid rgba(204, 204, 204, 0.4); border-radius: 0">2.1MB</td>
<td style="padding: 5px 10px; min-width: 85px; border: 1px solid rgba(204, 204, 204, 0.4); border-radius: 0">2.3MB</td>
<td style="padding: 5px 10px; min-width: 85px; border: 1px solid rgba(204, 204, 204, 0.4); border-radius: 0">-9.5%</td>
</tr>
<tr style="color: rgba(0, 0, 0, 1); background: none left top / auto no-repeat scroll padding-box border-box rgba(248, 248, 248, 1); width: auto; height: auto">
<td style="padding: 5px 10px; min-width: 85px; border: 1px solid rgba(204, 204, 204, 0.4); border-radius: 0">代码维护性</td>
<td style="padding: 5px 10px; min-width: 85px; border: 1px solid rgba(204, 204, 204, 0.4); border-radius: 0">困难</td>
<td style="padding: 5px 10px; min-width: 85px; border: 1px solid rgba(204, 204, 204, 0.4); border-radius: 0">简单</td>
<td style="padding: 5px 10px; min-width: 85px; border: 1px solid rgba(204, 204, 204, 0.4); border-radius: 0">+80%</td>
</tr>
</tbody>
</table>
</section>虽然初始加载时间略有增加，但在图片加载失败的处理效率和代码维护性方面有显著提升。
<h2 data-tool="mdnice编辑器" style="border-bottom: 2px solid rgba(239, 112, 96, 1); margin: 30px 0 15px; padding: 0; align-items: unset; background: none left top / auto no-repeat scroll padding-box border-box unset; border-top: 1px none rgba(0, 0, 0, 1); border-left: 1px none rgba(0, 0, 0, 1); border-right: 1px none rgba(0, 0, 0, 1); border-radius: 0; box-shadow: none; display: flex; flex-direction: unset; float: unset; height: auto; justify-content: unset; line-height: 1.1em; overflow-x: unset; overflow-y: unset; position: relative; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset"><span class="content" style="font-size: 22px; color: rgba(255, 255, 255, 1); background: none left top / auto no-repeat scroll padding-box border-box rgba(239, 112, 96, 1); line-height: 1.5em; letter-spacing: 0; align-items: unset; border: 1px none rgba(0, 0, 0, 1); border-radius: 3px 3px 0 0; box-shadow: none; display: inline-block; font-weight: bold; flex-direction: unset; float: unset; height: auto; justify-content: unset; margin: 0 5px 0 0; overflow-x: unset; overflow-y: unset; padding: 3px 10px 1px; position: relative; text-align: left; text-indent: 0; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset">集成指南<span style="border-bottom: 36px solid rgba(239, 235, 233, 1); align-items: unset; background: none left top / auto no-repeat scroll padding-box border-box unset; border-top: 1px none rgba(0, 0, 0, 1); border-left: 1px none rgba(0, 0, 0, 1); border-right: 20px solid rgba(0, 0, 0, 0); border-radius: 0; box-shadow: none; color: rgba(0, 0, 0, 1); display: inline-block; font-size: 16px; font-weight: bold; flex-direction: unset; float: unset; height: auto; justify-content: unset; letter-spacing: 0; line-height: 1.1em; margin: 0; overflow-x: unset; overflow-y: unset; padding: 0; position: relative; text-align: left; text-indent: 0; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset"> </h2>
<h3 data-tool="mdnice编辑器" style="margin: 30px 0 15px; padding: 0; display: block">快速集成</h3>
对于现有项目，只需在 <code style="color: rgba(239, 112, 96, 1); font-size: 14px; line-height: 1.8em; letter-spacing: 0; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; border-top: 3px none rgba(0, 0, 0, 1); border-bottom: 3px none rgba(0, 0, 0, 0.4); border-left: 3px none rgba(0, 0, 0, 0.4); border-right: 3px none rgba(0, 0, 0, 0.4); overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace; word-break: break-all">head</code> 标签中添加：
<pre class="custom" data-tool="mdnice编辑器" style="border-radius: 5px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55); text-align: left; margin: 10px 0; padding: 0"><span style="display: block; background: url("https://files.mdnice.com/user/3441/876cad08-0422-409d-bb5a-08afec5da8ee.svg") 10px 10px / 40px no-repeat rgba(40, 44, 52, 1); height: 30px; width: 100%; margin-bottom: -7px; border-radius: 5px"><code class="hljs" style="overflow-x: auto; padding: 15px 16px 16px; color: rgba(171, 178, 191, 1); background: rgba(40, 44, 52, 1); border-radius: 5px; font-family: Consolas, Monaco, Menlo, monospace; font-size: 12px"><script src="https://cdn.jsdelivr.net/gh/mrhuo/fix-broken-img@latest/src/fix-broken-img.min.js"          id="fix-broken-img"         data-background="#f5f5f5"         data-text-color="#666"         data-default-text="😟 图片加载失败"         data-auto-convert="true"> </script> </code></pre>
<h2 data-tool="mdnice编辑器" style="border-bottom: 2px solid rgba(239, 112, 96, 1); margin: 30px 0 15px; padding: 0; align-items: unset; background: none left top / auto no-repeat scroll padding-box border-box unset; border-top: 1px none rgba(0, 0, 0, 1); border-left: 1px none rgba(0, 0, 0, 1); border-right: 1px none rgba(0, 0, 0, 1); border-radius: 0; box-shadow: none; display: flex; flex-direction: unset; float: unset; height: auto; justify-content: unset; line-height: 1.1em; overflow-x: unset; overflow-y: unset; position: relative; text-align: left; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset"><span class="content" style="font-size: 22px; color: rgba(255, 255, 255, 1); background: none left top / auto no-repeat scroll padding-box border-box rgba(239, 112, 96, 1); line-height: 1.5em; letter-spacing: 0; align-items: unset; border: 1px none rgba(0, 0, 0, 1); border-radius: 3px 3px 0 0; box-shadow: none; display: inline-block; font-weight: bold; flex-direction: unset; float: unset; height: auto; justify-content: unset; margin: 0 5px 0 0; overflow-x: unset; overflow-y: unset; padding: 3px 10px 1px; position: relative; text-align: left; text-indent: 0; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset">总结<span style="border-bottom: 36px solid rgba(239, 235, 233, 1); align-items: unset; background: none left top / auto no-repeat scroll padding-box border-box unset; border-top: 1px none rgba(0, 0, 0, 1); border-left: 1px none rgba(0, 0, 0, 1); border-right: 20px solid rgba(0, 0, 0, 0); border-radius: 0; box-shadow: none; color: rgba(0, 0, 0, 1); display: inline-block; font-size: 16px; font-weight: bold; flex-direction: unset; float: unset; height: auto; justify-content: unset; letter-spacing: 0; line-height: 1.1em; margin: 0; overflow-x: unset; overflow-y: unset; padding: 0; position: relative; text-align: left; text-indent: 0; text-shadow: none; transform: none; width: auto; -webkit-box-reflect: unset"> </h2>
<code style="color: rgba(239, 112, 96, 1); font-size: 14px; line-height: 1.8em; letter-spacing: 0; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; border-top: 3px none rgba(0, 0, 0, 1); border-bottom: 3px none rgba(0, 0, 0, 0.4); border-left: 3px none rgba(0, 0, 0, 0.4); border-right: 3px none rgba(0, 0, 0, 0.4); overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace; word-break: break-all">fix-broken-img</code> 解决了 Web 开发中一个长期被忽视的问题——图片加载失败的优雅处理。通过零依赖的设计、智能的自动转换机制和高度可定制的配置，它为开发者提供了一个简单而强大的解决方案。
<strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">核心优势：
<ul data-tool="mdnice编辑器" style="list-style-type: disc; margin: 8px 0; padding: 0 0 0 25px; color: rgba(0, 0, 0, 1)">
<li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal">🚀 <strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">零依赖：纯原生实现，无需额外库</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal">⚡ <strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">开箱即用：一行代码即可生效</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal">🎨 <strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">高度可定制：支持自定义样式和文本</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal">🔄 <strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">智能转换：自动处理现有和动态添加的图片</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal">📱 <strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">框架友好：完美适配各种前端框架</section></li></ul>
<strong style="color: rgba(0, 0, 0, 1); font-weight: bold; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">适用场景：
<ul data-tool="mdnice编辑器" style="list-style-type: disc; margin: 8px 0; padding: 0 0 0 25px; color: rgba(0, 0, 0, 1)">
<li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal">电商网站商品图片</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal">社交媒体用户头像</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal">新闻媒体配图</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal">内容管理系统</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; color: rgba(1, 1, 1, 1); font-size: 16px; line-height: 1.8em; letter-spacing: 0; text-align: left; font-weight: normal">任何需要图片降级的 Web 应用</section></li></ul>
项目已在 GitHub 开源：https://github.com/mrhuo/fix-broken-img
欢迎 Star ⭐ 和贡献代码！
<hr data-tool="mdnice编辑器" style="margin: 10px 0; padding: 0; border-top: 1px solid rgba(0, 0, 0, 1); border-bottom: 3px none rgba(0, 0, 0, 0.4); border-left: 3px none rgba(0, 0, 0, 0.4); border-right: 3px none rgba(0, 0, 0, 0.4); border-radius: 0; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: 1px">
<em style="color: rgba(0, 0, 0, 1); font-style: italic; background: none left top / auto no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); width: auto; height: auto; margin: 0; padding: 0; border: 3px none rgba(0, 0, 0, 0.4); border-radius: 0">本文作者 mrhuo，喜欢做一些有趣的事，让繁琐的事情变得简单。如果你有任何问题或建议，欢迎在 GitHub 上提交 Issue 或通过邮件联系。
</section>

</div>
<div id="MySignature" role="contentinfo">
专注互联网产品开发，分享工具心得。
做好每一件或大或小的事情。
http://www.mrhuo.com 
来源：https://www.cnblogs.com/MrHuo/p/19288886/fix-broken-img

頁: [1]

琼殿技术论坛's Archiver

fix-broken-img：零依赖的图片优雅降级解决方案