个人网站搭建：图片丢失时页面应怎样保留必要信息
📱 Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
🔗 /25e171ee761e.html
📄
个人网站搭建：图片丢失时页面应怎样保留必要信息
图片丢失后，页面不必因为一张图而变成空白或只剩破图图标。更稳妥的做法是：让每个图片位置都带一段能替代图片的说明，并在图片加载失败时把这段说明显示出来。这样读者至少知道这里原本有什么、与正文有什么关系，页面也不会出现无法解释的空洞。
先检查图片是不是真的“丢了”
在动手改页面前，先区分三种情况。第一种是文件确实不存在，服务器返回 404；第二种是文件还在，但路径写错、大小写不一致或多了目录层级；第三种是文件能访问，但加载慢或域名配置有问题。三种情况的处理方式不同，不能一律当作“图片没了”。
一个可执行的判断动作：打开浏览器的开发者工具，切到网络面板，刷新页面，看失败请求的状态码和请求地址。如果状态码是 404，说明请求的地址上没有文件；如果是 403，通常是权限或防盗链设置；如果是超时或连接被拒绝，问题更可能在服务器或域名解析。这个结果会决定下一步：404 要去补文件或改路径，403 要检查访问规则，超时则先排查服务端。
给每张图补上“文字替身”
图片的替代文本不是装饰，而是图片缺席时唯一能顶上的信息。写替代文本时，不要只写“图片”“配图”或文件名。要写这张图在页面里承担什么信息。例如一张产品尺寸图，替代文本应包含尺寸或“产品尺寸示意图”；一张流程图，应说明它表达的是哪几步关系。
如果图片只是纯装饰，替代文本可以留空，让辅助技术跳过它。但纯装饰图不应承载正文必须依赖的信息。也就是说，关键信息不能只存在于图片里，否则替代文本也只能补救一部分。
实际操作可以这样：把页面里所有 <img> 标签找出来，逐个问“如果这张图不显示，读者少了什么信息”。把答案写进 alt 属性。完成后重新加载页面，用开发者工具禁用图片，检查文字是否还能读通。这一步的结果会直接影响下一页的修改顺序：如果禁用图片后正文仍然完整，说明替代文本合格；如果读不通，就要回到内容层面补文字。
用失败回退保留版面信息
仅靠替代文本有时不够，因为破图图标和空白区域仍会影响阅读。可以在图片加载失败时触发一个回退样式，让图片位置显示一段说明文字或一个占位块。常见做法是给图片加 onerror 处理，把图片替换成一个带文字说明的元素。
假设一个页面有一张“装配步骤示意图”，图片地址失效。可以在 onerror 里把这张图替换成一段文字：“装配步骤示意图暂时无法显示，请按正文第 3 步至第 5 步操作。”这样读者不会停在破图前，而是能继续完成任务。这个动作的结果是：页面从“信息中断”变成“信息降级但仍可用”。
回退内容要简短，并且和原图承担的信息一致。不要把整段正文塞进回退里，也不要用“加载失败”四个字代替所有说明。回退只负责保留必要信息，不负责恢复图片本身。
把关键信息从图片里搬回正文
如果一张图承载的是价格、参数、步骤、联系方式或结论，那么它不适合成为唯一载体。更稳的做法是把这些信息写进正文或列表，图片只作为补充。这样即使图片丢失，页面仍然能回答读者的问题。
可以按这个顺序处理：先列出页面中所有“没有图就读不懂”的位置；再判断这些位置的信息能否用一句话或一个列表表达；能表达的写进正文，图片保留为增强；不能表达的，至少补上替代文本和失败回退。完成后的检查动作是：在禁用图片的状态下通读页面，看是否还能得到完整结论。如果结论仍然完整，说明信息不再依赖单一图片。
回退方案要跟随页面一起维护
图片会换、路径会改、页面会迁移，回退文字也会过期。建议在每次更新图片时，顺带检查三件事：替代文本是否还准确，失败回退是否还指向正确步骤，正文是否仍然不依赖图片。这个检查不需要额外工具，只要在发布前禁用一次图片加载即可。
如果页面数量多，可以先从访问量高、转化路径短或信息关键的那几页开始。处理完一页后，记录这页用了哪种回退方式、是否还需要补正文。下一次改版时，这份记录就是判断“图片能不能删、路径能不能换”的依据。图片丢失本身不是灾难，真正的问题是页面没有为它准备一个能继续读下去的版本。
