网站搭建流程，图片丢失时页面应怎样保留必要信息

📍 WDQWDWQD987AAAAA:216.73.217.172
📱 Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
🔗 /534418fa2872.html
📄

网站搭建流程，图片丢失时页面应怎样保留必要信息

图片丢失时，页面不应让文字信息一起消失。先判断这张图承担的是“装饰”还是“信息载体”：装饰图缺失可以静默降级，信息图缺失必须用替代文字、图注或结构化数据把关键信息补回来。下面用一个你手里的具体页面作为对象，把处理动作拆成可执行的步骤。

先给页面上的每张图分类，再决定保留什么

打开一个已有实际业务的页面源码或后台编辑器，逐张查看图片的用途。判断标准只有一条：如果这张图完全不显示，用户是否还能完成页面原本要传达的任务。

分类完成后，把信息类和操作类图片单独列出来，这是后续要重点处理的对象。装饰类只需要处理尺寸占位，不必逐张写说明。

信息类图片丢失时，用三种方式把信息留在页面上

第一种是替代文字。替代文字不是图片文件名，也不是“产品图”这类泛称，而应写出图片里对用户有用的内容。例如一张标注了接口位置的设备背面图，替代文字可以写成“设备背面接口从左到右为电源、网口、USB”。这样图片不显示时，用户仍能读到接口顺序。

第二种是图注。图注放在图片容器下方，作为正文的一部分。它适合承载比替代文字更长、更完整的说明，例如流程图的步骤顺序、证书上的关键字段。图注在图片正常显示时也能帮助理解，属于双重用途。

第三种是结构化数据或正文复述。当图片承载的是价格表、参数表、时间线时，把同样的数据以文字列表或段落形式写进正文。不要只依赖图片里的文字，因为图片里的文字对屏幕阅读器和搜索引擎都不可直接读取。

假设一个页面用图片展示“三种套餐的对比”，图片丢失后替代文字只能写一句概括，用户就无法比较。此时应把套餐名称、包含项、适用条件写成文字列表，图片只作为辅助。这个动作的结果是：图片恢复后页面信息更完整，图片再次丢失时页面仍可用。

给图片容器留出稳定尺寸，避免文字被挤走

图片丢失后常见的问题是容器塌陷，导致下方文字上移、按钮错位，用户以为页面坏了。处理方式是在图片外层容器上设置宽高比或最小高度，让图片位置始终占住空间。

具体动作：在图片标签或外层容器上写死宽高比，例如用 CSS 的 aspect-ratio 或给容器设置 min-height。图片加载失败时，容器仍保留原尺寸，替代文字或图注显示在容器内，页面结构不跳动。

这个动作的影响是：用户不会因为布局突然位移而误点，阅读顺序保持稳定。下一步可以检查移动端窄屏下同一容器是否仍然稳定，必要时为窄屏单独设置更小的最小高度。

用 onerror 做降级，但要区分“暂时失败”和“永久缺失”

前端可以为图片绑定加载失败处理。常见写法是给 <img> 加 onerror，触发后隐藏图片、显示预先写好的文字块或占位说明。例如：

<img src="chart.png" alt="2024年各季度出货量对比" onerror="this.hidden=true;document.getElementById('chart-fallback').hidden=false">

这里要区分两种情况。暂时失败：网络波动、图片服务器短时不可用，图片稍后可能恢复。永久缺失：文件被删除、路径写错、迁移时漏传。对暂时失败，降级文字可以提示“图片加载失败，请稍后刷新”；对永久缺失，降级文字应直接承担信息传达，而不是让用户反复刷新。

判断依据可以看图片请求返回的状态码和出现频率。如果同一张图在多次访问中持续返回 404，更可能是永久缺失；如果只是偶发失败，先检查资源路径和服务器日志，再决定是否改写替代内容。注意，请求量归零不能单独证明图片已被永久删除，也可能是页面本身没有被访问、抓取被限制或缓存未更新。

把处理结果写回页面维护清单，决定下一步动作

完成上述处理后，为每个信息类图片记录三件事：替代文字是否写清、图注是否补上、正文是否有等价文字。记录的目的是让下一次改版或迁移时有据可查。

  1. 替代文字为空或只有文件名的，标记为待补。
  2. 图注缺失但图片承载关键信息的，标记为待补。
  3. 正文已能独立说明信息的，图片可降级为装饰类，后续只需保留尺寸。

如果检查后发现多数信息类图片都已有等价文字，那么页面在图片丢失时的风险已经很低，下一步可以只处理装饰图的尺寸占位。如果发现关键信息仍只存在于图片里，优先补正文文字，再考虑图片本身的恢复或替换。这个顺序能保证即使图片永远不回来，页面仍然对用户有用。

图1 图2
nginx