如果您的网站经常添加内容，那么随着时间的推移，您网站的某些图像可能会丢失。本文将帮助您处理丢失的图像，以避免对您网站的用户体验产生负面影响。
为什么您的网站可能缺少图片？这可能有多种原因：
如果发生上述任何一种情况，访问者在尝试查看包含缺失图像的内容时就会遇到问题。
为了帮助减轻损坏图像的负面影响，我将分享 4 种不同的方法来更好地处理您网站上丢失的图像。
网络浏览器中丢失的图片是什么样的
Chrome 中丢失图像的示例（右侧）
虽然每个浏览器处理它的方式略有不同，但浏览器通常会显示某种类型的损坏图像图标。
除了通常看起来很糟糕之外，这个损坏的图像还会弄乱您的页面布局，因为损坏的图像图标通常比您的原始图像小。
如果缺少的图像是元素的背景，则不应更改页面结构。但是，缺少背景图像会导致前景文本和其他元素的对比度或可见性降低，从而给访问者带来不便并损害您网站的可访问性。
更好地处理网站上丢失图片的四种方法
虽然您可能永远不会打算在您的网站内容中包含丢失的图片，但由于上述原因，它几乎肯定会发生在一些点。
为了帮助减轻这种情况的负面影响，您可以采用几种不同的策略，我将在下面进行描述。
1.在
标签
中使用alt和title属性问题很大缺少图像是读者不知道丢失的图像应该传达什么，这可能会导致您网站上的理解问题。一个简单的解决方法是对替代文本和标题使用图像属性。
Image alt text 有两个主要功能：
- 如果图片丢失（如上例所示）或用户的浏览器设置为不显示图片，它会显示。
- 如果有人有视力障碍并使用屏幕阅读器，屏幕阅读器会大声朗读替代文本。
因此，即使访问者看不到您的图片，如果您使用描述性替代文字，他们仍然可以准确了解图片的含义。
除了添加图片替代文字外，还应该在title属性中加入相关文字。如果他们将鼠标悬停在图像上，他们的浏览器将在工具提示中显示 title 属性中的文本。在大多数情况下，这两个属性将具有相同的文本内容。
要在 WordPress 上添加或编辑标题属性和图像替代文本，您可以使用 WordPress 媒体库中的附件详细信息侧边栏：
2.在
标签中使用了onerror属性
除了添加文本，另一个您可能想要做的是显示一个占位符图像，以防图像丢失。为此，您可以使用单行解决方案，您可以使用 onerror 属性在 HTML 中为您的图像实现该解决方案。
如果原图是无法访问并引发错误，onerror 属性中的代码将图像的 src 标记更改为默认图像的位置。
此方法仅适用于内容中的常规图像，不适用于背景图像。
如果您使用的是 WordPress，则需要使用 WordPress 编辑器的代码编辑功能手动添加 onerror 属性：
- 经典编辑器 – 使用文本选项卡。
- Block Editor (AKA Gutenberg) – 使用右上角的下拉菜单访问代码编辑器。
p>要使用此代码，请将 default-image.jpg 替换为指向您要使用的实际图像（例如默认占位符图像）的链接。
3.使用第三方服务
一些图像优化服务可以选择提供默认图像以防图像丢失。
例如，如果原始图像不存在，ImageKit 有一个提供默认图像的简单解决方案。这很像上面的 onerror 属性方法。
使用 ImageKit，di- 参数允许您指定一个占位符图像，如果原始图像不可用，该图像将被传送。
不过，与onerror属性不同的是，你会将di-参数直接添加到图片src=""。这是它的样子：
但是，与 onerror 属性一样，这不适用于背景图像。
第三方服务还可以帮助您更可靠地传送图像，帮助您在第一时间防止图像丢失。例如，Optimole WordPress 图像优化插件通过其自己的内容交付网络 (CDN) 提供图像，这可能比您的托管服务器更可靠。
4.通过您的服务器为丢失的图像提供默认图像
现在让我们看一个解决方案，它可能使用您站点的 .htaccess 文件将任何图像替换为默认图像。
这只有在您从自己的服务器托管和提供图像时才有效（即您没有使用为您提供图像的第三方图像优化服务）。
这种方法有点高级，除非你有一定的技术知识，否则不推荐使用。
基本上，您需要：
- 在您的网络服务器的根目录中创建一个 .htaccess 文件（如果它尚不存在）。
- 检查图像请求，通常以图像文件扩展名结尾（如果需要，可以添加更多扩展名）。
- 如果请求的文件不存在，则提供默认图像。
⚠️ 每当您编辑站点的 htaccess 文件时，都应始终先进行备份。
这是您需要添加到 .htaccess 文件中的示例代码片段。将 /default-image.jpg 替换为您要使用的占位符图像的实际 URL：
RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_URI} .(gif|jpe?g|png ) $ [NC]
重写规则。* /default-image.jpg [L]
如果您不确定如何编辑 .htaccess 文件，您可以按照我们的指南了解如何防止图像盗窃步骤链。
最后的想法
虽然您绝不会打算丢失网站上的图片，但由于各种原因它们仍然会发生。上述四种方法可以帮助确保您网站的访问者即使遇到丢失图片的情况，也能获得良好的体验。
在任何情况下，您都应该添加图像替代文本和标题。除了确保有后备文本之外，这还可以让视障访问者更容易访问您的网站，这本身就是一件好事。
但是，您也可以考虑使用 onerror 属性来指定替代图像。一些第三方图像优化服务——例如 ImageKit——也允许您以类似的方式指定后备图像。
或者，如果您喜欢编辑站点的 .htaccess 文件，则可以在服务器级别为丢失的图像指定一个全局占位符图像。同样，我们不建议初学者使用此方法。
除了这些具体方法之外，您还应该遵循一些最佳实践，以最大限度地减少访问者首先遇到丢失图像的可能性。最佳实践，例如...
