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

移动端建站，图片丢失时页面应怎样保留必要信息

结论先说：图片丢失时，页面不应只留下空白占位或破图图标，而应把图片承载的信息层级转移到文字上——用替代文本、图注或结构化说明补位，让读者即使看不到图也能理解内容。但这个结论有一个失效条件：如果图片本身就是信息主体（如商品实拍、证书扫描件、图表数据），文字补位只能说明“这里有什么”，无法替代信息本身，此时应优先修复图片而非改写页面。

先判断图片属于哪一类，再决定补什么

不同图片在页面中承担的角色不同，补位方式也不同。可以按下面三类区分：

• 装饰性图片：仅用于分隔、氛围或视觉节奏。丢失后不影响理解，可让替代文本留空，避免读屏软件读出无意义内容。
• 说明性图片：配合正文说明流程、对比或示例。丢失后应在原位置保留一句文字，说明这张图原本展示什么，例如“步骤二示意图：填写收货地址”。
• 信息主体图片：图表、证件、商品图、截图。丢失即信息缺失，文字只能标注其存在和用途，不能替代内容本身。

判断动作很简单：把图片遮住，只读周围文字，看读者是否还能完成页面想让他完成的事。如果答案是否定的，这张图就属于信息主体，补位优先级应让位于修复。

替代文本不是万能补丁，写法要区分场景

替代文本常被当成唯一手段，但它适合的是“用一句话说清图片功能”，不适合承载长段信息。实际处理时可参考：

1. 功能性图片写用途，如“搜索按钮”。
2. 说明性图片写图中关键信息，如“三种户型面积对比：60、89、120 平方米”。
3. 纯装饰图片留空，不写“图片”“配图”这类无信息词。
4. 信息主体图片若无法修复，应在正文里补一段文字说明其数据来源和结论，并标注该图暂不可用。

这里有一个常见反例：有人把所有丢失图片统一替换成“暂无图片”四个字。这看似保留了位置，实际上抹掉了图片原本的信息类型，读者无法判断缺失的是示意图还是关键数据，反而增加了理解成本。

一个注明假设的短例子

假设某移动端页面介绍一款设备的安装步骤，共五张示意图。若第三张图丢失，处理方式可以是：保留原图位置，显示一行文字“第三步示意图：将卡扣对准凹槽后向下按压”，并在图注中重复该步骤的关键动作。这样读者仍能按文字完成操作，后续步骤不受影响。反之，如果丢失的是页面顶部的设备外观主图，文字只能写“设备正面图”，读者仍不知道设备长什么样，此时更合理的动作是先修复该图，而不是用文字硬撑。

补位后的下一步动作

完成文字补位后，应做一次无图阅读测试：在浏览器中禁用图片加载，通读页面，检查是否出现信息断层、指代不明的“如下图”“见图”等表述。若发现某处文字依赖图片才能成立，就回到该处补充独立说明。这个动作的结果会直接决定下一步是继续修图，还是接受当前文字版本作为降级方案。若测试通过，说明页面在图片缺失时仍能传达必要信息；若未通过，则说明该图片属于信息主体，应优先安排修复或替换，而不是继续在文字上打补丁。