[ad_1]
如果您有一個經常添加內容的網站，那麼隨著時間的推移，您網站的某些圖像可能會丟失。 這篇文章將幫助您處理丟失的圖像，以避免對您網站的用戶體驗產生負面影響。
為什麼您的網站上可能會丟失圖像？ 這可能有幾個原因：
如果發生任何這些情況，訪問者在嘗試查看包含丟失圖像的內容時都會遇到問題。
為了幫助減輕損壞圖像的負面影響，我將分享 4 種不同的方法來更好地處理您網站上丟失的圖像。
網路瀏覽器中丟失的圖像是什麼樣的
Chrome 中丟失圖像的示例（右側）
儘管每個瀏覽器的處理方式略有不同，但瀏覽器通常會顯示某種類型的損壞圖像圖標。
除了通常看起來很糟糕之外，這個損壞的圖像還會弄亂您的頁面布局，因為損壞的圖像圖標通常比您的原始圖像小。
如果丟失的圖像是元素的背景，則不應更改頁面結構。 但是，缺少背景圖像可能會導致前景文本和其他元素的對比度或可見性降低，從而給訪問者帶來不便並損害您網站的可訪問性。
更好地處理網站上丟失圖像的四種方法
雖然您可能從未打算在您的網站內容中包含丟失的圖像，但由於上面列出的原因，它幾乎肯定會在某些時候發生。
為了幫助減輕這種情況的負面影響，您可以採用幾種不同的策略，我將在下面介紹這些策略。
1.在![]()
標籤中使用alt和title屬性
丟失圖像的一個大問題是讀者不知道丟失的圖像應該傳達什麼，這可能會導致您的網站出現理解問題。 一個簡單的解決方法是使用圖像屬性作為替代文本和標題。
圖片替代文字有兩個主要功能：
- 如果圖像丟失（如上面顯示的示例）或用戶的瀏覽器設置為不顯示圖像，它會顯示。
- 如果某人有視力障礙並使用屏幕閱讀器，則屏幕閱讀器會大聲朗讀替代文本。
因此，即使訪問者看不到您的圖片，如果您使用描述性替代文字，他們仍然可以確切地知道它的意思。
除了添加圖像替代文本外，您還應該將相關文本放入標題屬性中。 如果將滑鼠懸停在圖像上，他們的瀏覽器將在工具提示中顯示標題屬性中的文本。 在大多數情況下，這兩個屬性將具有相同的文本內容。
要在 WordPress 上添加或編輯標題屬性和圖像替代文本，您可以使用 WordPress 媒體庫中的附件詳細信息側欄：
2.在![]()
標籤中使用onerror屬性
除了添加文本之外，您可能想要做的另一件事是顯示一個佔位符圖像，以防圖像丟失。 為此，您可以使用單行解決方案，您可以使用 onerror 屬性在 HTML 中為您的圖像實施該解決方案。
如果原始圖像無法訪問並引發錯誤，則 onerror 屬性中的代碼會將圖像的 src 標記更改為默認圖像的位置。
此方法僅適用於您內容中的常規圖像，不適用於背景圖像。
如果您使用的是 WordPress，則需要使用 WordPress 編輯器的代碼編輯功能手動添加 onerror 屬性：
- 經典編輯器 – 使用文本選項卡。
- 塊編輯器 (AKA Gutenberg) – 使用右上角的下拉菜單訪問代碼編輯器。
要使用此代碼，請將 default-image.jpg 替換為您要使用的實際圖像的鏈接（例如默認佔位符圖像）。
3.使用第三方服務
一些圖像優化服務可以選擇提供默認圖像，以防圖像丟失。
例如，ImageKit 有一個簡單的解決方案，用於在原始圖像不存在的情況下提供默認圖像。 這很像上面的 onerror 屬性方法。
使用 ImageKit，di- 參數允許您指定將在原始圖像不可用時交付的佔位符圖像。
但是，與 onerror 屬性不同的是，您將直接將 di- 參數添加到圖像 src=””。 這是它的樣子：
不過，與 onerror 屬性一樣，這不適用於背景圖像。
第三方服務還可以幫助您更可靠地交付圖像，從而幫助您從一開始就防止丟失圖像。 例如，Optimole WordPress 圖像優化插件通過其自己的內容交付網路 (CDN) 提供圖像，這可能比您的託管伺服器更可靠。
4.通過您的伺服器為丟失的圖像提供默認圖像
現在讓我們看看一個解決方案，該解決方案可能會使用您網站的 .htaccess 文件將任何圖像替換為默認圖像。
僅當您從自己的伺服器託管和提供圖像（即，您沒有使用為您提供圖像的第三方圖像優化服務）時，此方法才有效。
這種方法有點高級，所以除非你有一些技術知識，否則我們不建議這樣做。
本質上，您需要：
- 在您的 Web 伺服器的根目錄中創建一個 .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 文件，您可以在伺服器級別為丟失的圖像指定一個全局佔位符圖像。 同樣，我們不推薦這種方法來完成初學者。
除了這些特定方法之外，您還應該遵循一些最佳實踐，以最大限度地減少訪問者首先遇到丟失圖像的機會。 最佳實踐，例如……