令 Firefox 能夠提示無法載入的圖片

一個由我用 Firefox 2 以來都很困擾的問題。

遇上一些不能下載的圖片（可能因為網站不接受太多同時的連線，或是連線太慢而導致 timeout，或真的是 dead link），Firefox 很多時都沒有提示，即使 Firefox 已設定 browser.display.show_image_placeholders 為 true。而當 Internet Explorer 遇到相同情況的時候，就會顯示紅色的「叉燒包」。

以往看討論區，遇到這情況，都是再次 Reload，或是用附加元件 IE Tab 直接轉用 IE 來看。

但原來只要一個 CSS Tweak 就可以完全解決。

方案一：

1. 於「%APPDATA%\Mozilla\Firefox\Profiles\[profile name]\chrome」中建立「userContent.css」。也可以把「userContent-example.css」改名成「userContent.css」。
2. 開啟「userContent.css」，在最後加入以下內容。
   

   /*
 * Show image placeholders
 */
@-moz-document url-prefix(http), url-prefix(file) {
  img:-moz-broken{
    -moz-force-broken-image-icon:1;
    width:24px;
    height:24px;
  }
}

3. 存檔後，再啟動 Firefox 便會生效。

方案二：

1. 先安裝一個附加元件：Greasemonkey
2. 有兩個 userscript 都有提示無法載入圖片的功能，它們所用的 icon 都不同，你可以按自己的喜好來選擇：Show Missing Images 只有基本功能；Image Fix and Linkify 就多一點，詳情可看連結。
3. 安裝好之後便會生效。

以後再遇到無法載入的圖片，在 Firefox 中也可以知道，不必用 IE Tab 了。

當你修改好之後可以在這裏試試效果：

Image tag with alt tag	Image tag with empty alt tag	Image tag without alt tag

下一次再談另一個 Firefox 看圖問題的解決方法。

參考資料：
Show image placeholders in Firefox
令無法載入的圖片像IE顯示成一個叉的方法?
Greasemonkey Script: Show Missing Images