网站开发中：图片丢失时页面应怎样保留必要信息
📱 Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
🔗 /d9ec2015aa4f.html
📄
网站开发中：图片丢失时页面应怎样保留必要信息
结论取决于图片承载信息的程度：如果图片只是氛围装饰，直接隐藏并保留替代文本即可；如果图片是价格表、流程图、证件照或操作步骤，就必须在图片位置输出可读的文字信息，而不是留一个空框。判断标准不是“图片重不重要”，而是“用户失去这张图后还能不能完成当前任务”。
先分清两种丢失：加载失败与文件被删
浏览器里出现破图图标，和图片文件在服务器上已经不存在，是两种不同状态，处理方式也不一样。
- 加载失败：图片地址可达，但网络中断、跨域限制或临时错误导致请求没有返回图像。此时可以用
onerror把<img>替换成带背景色的占位块，并保留原有alt文本，用户刷新后有机会恢复。 - 文件被删：请求返回 404 或 410，图片不会再回来。继续保留占位框只会让页面看起来没做完，应当直接输出替代文字或调整版式。
这两种状态在页面上的表现可以相同，但决策不同。前者适合“可恢复”的临时占位，后者适合“永久降级”的文本方案。如果分不清，就先看响应状态码，再决定替换逻辑。
取舍一：留占位框还是彻底移除
留占位框的代价是页面出现空白区域，好处是版式不跳动。彻底移除的代价是布局可能位移，好处是页面不留死区。
选择条件可以这样定：图片处在固定比例的容器里，比如商品主图、头像、封面，留一个同比例占位框，并在框内写一句说明，例如“图片暂不可用”。图片处在文字流中间，比如文章插图、步骤截图，直接移除更干净，把 alt 文本接在上下文里即可。判断依据是图片是否承担了“对齐其他元素”的版式职责。承担了，就留框；没承担，就移除。
一个常见反例是：为了不让版式跳动，给所有丢失图片都保留占位框，结果一篇文章里出现七八个灰块，用户会以为页面坏了。占位框只适合少量、结构化的图片位，不适合正文密集插图。
取舍二：替代文本写什么，写到什么程度
替代文本不是图片描述，而是图片在页面中承担的信息。装饰图写空 alt，功能图写动作，信息图写结论。
- 装饰图：
alt=""，屏幕阅读器跳过，页面不出现多余文字。 - 功能图：按钮图标写“搜索”“关闭”，让用户知道点下去会发生什么。
- 信息图：图表写“2024 年各季度订单量，第三季度最高”，把读图才能得到的结论直接写出来。
如果图片丢失后替代文本只有“图片”“banner”“配图1”这类词，等于没有保留信息。替代文本的验收标准是：把图片全部关掉，只读文字，页面是否仍然讲得通。
一个假设例子：价格表图片丢失
假设某页面用一张图片展示三档服务价格，图片文件被误删。此时隐藏图片并保留 alt="价格表" 是错误处理，因为用户拿不到价格。正确动作是把价格写成 HTML 列表或段落，让文字本身可读、可复制、可被辅助技术识别。这个动作的结果是页面信息完整，但需要额外维护一份文字版本，后续改价要同时改两处。下一步就是决定是否把价格长期放在文字里，图片只作为补充。
反过来说，如果这张图只是首页轮播里的氛围图，丢失后移除并留空 alt 完全成立，不需要补任何文字。
下一步动作：先扫描，再定规则
实际操作可以先抓取线上页面的图片请求，筛出返回 404 或 410 的地址，按“版式位”和“信息位”分成两类。版式位统一走占位逻辑，信息位统一走文字降级逻辑，并把这条规则写进组件的图片处理分支。这样做的结果是：新页面接入同一套图片组件时，丢失行为可预期，不需要每次临时决定。执行时注意，请求量归零或抓取异常也可能来自网络波动或统计口径变化，不能只凭一次扫描就断定图片已全部处理完毕，需要复查状态码和页面渲染结果。
