【白話科普】網站圖片不顯示，背後的緣由你都清楚嗎

瀏覽網頁的時候，什麼纔是最重要的？是充滿信息的文字麼？沒想到吧，是我圖片噠！在這個快節奏的時代裏，圖片纔是碎片化時間中最容易傳遞信息的存在。所以在網頁中，圖片是不可或缺的存在。然而常常有朋友反應，打開網頁的時候不顯示圖片，這是爲何呢？是什麼緣由致使了圖片沒法加載呢？

圖片不顯示的常見緣由

網速問題

若是打開網頁的時候沒法打開圖片，首先應該檢查的就是網速問題，若是網速太慢或某張圖片說起過大，就會出現圖片加載失敗的狀況。

檢查方法：網速過慢本身可有直接感受，如打開百度、新浪之類的網站都比較慢，能夠的話，能夠直接百度搜「網速測試」進行直接在線測試本身的網速。

Flash Player 問題

有的時候打開網站後，圖片會顯示須要 Flash Player，遇到這種提示後，咱們能夠點擊控制面板，雙擊 Flash Player 選項，電腦桌面顯示出了 Flash Player 設置管理器，而後選擇高級，點擊當即測試。咱們點擊瀏覽器右上角的工具。選擇管理加載項，啓用 shockwave flash object，而後點擊肯定。

Internet 選項設置不當

當瀏覽器過濾了圖片，或者將咱們所訪問的網站添加到受限站點，也可能致使圖片沒法顯示。咱們能夠點擊瀏覽器工具，點擊 Internet 選項，針對第一種狀況，咱們選擇高級選擇，點擊顯示圖片，最後選擇應用，在從新訪問網站就能夠了。若是是後一種狀況，咱們能夠選擇安全選項，點擊受限站點，刪除受限站點的列表中咱們所訪問的網站，最後選擇下應用就行了。

除去從新刷新訪問外，咱們也能夠用瀏覽器自帶的抓包工具來看下訪問效果，能夠在頁面按 F12 或者在頁面上右鍵點「檢查」，就能夠看到開發者工具的內容。

以後打開 Network 面板，該面板記錄頁面上每一個網絡操做的相關信息，包括詳細的耗時數據、HTTP 請求與響應標頭和 Cookie。

點擊資源名稱，能夠查看與資源有關的更多信息。

可用標籤會因您所選擇資源類型的不一樣而不一樣，但下面四個標籤最多見：

• Headers：與資源關聯的 HTTP 標頭。Headers 標籤能夠顯示資源的請求地址、HTTP 方法以及響應狀態代碼。此外，該標籤還會列出 HTTP 響應和請求標頭、它們的指以及任何查詢字符串參數。
• Preview : JSON、圖像和文本資源的預覽。 Preview 標籤會顯示該資源的預覽信息，也可能不顯示，具體取決於您所選擇資源的類型。
• Respones : 顯示資源未格式化的 HTTP 響應內容（若是存在）。
• Timing : 資源請求生命週期的精細分解。

能夠在控制檯看下圖片響應的狀態以及響應的時間來判斷不顯示的緣由，以便於更快的解決問題。

固然也有一些比較特殊的緣由，好比如今很是流行的 WebP 格式的圖片，因爲不是全部瀏覽器支持，有時候也會出現圖片不顯示的狀況，下面咱們來細看下。

瀏覽器不支持WebP

爲了減小互聯網上圖片的發送時間和流量消耗，如今不少網站都選擇了 WebP 格式的圖片。WebP 集合了多種圖片文件格式的特色。它像 JEPG 同樣適合壓縮照片和其餘細節豐富的圖片，像 GIF 同樣能夠顯示動態圖片，像 PNG 同樣支持透明圖像。同時 WebP 在性能上也比其餘格式的圖片更強勁，根據 Google 的測試，WebP 無損壓縮圖片比 PNG 圖片少了45%的文件體積。

使用 WebP 確實能給實際應用帶來不少好處，可是由於並不是全部瀏覽器都支持 WebP ，好比：IE、Firefox 某些版本等。因此當瀏覽器不支持時，就會出現圖片沒法顯示的問題。

面對這種狀況，有辦法讓支持 WebP 格式的瀏覽器看 WebP 圖片，不支持 WebP 格式的顯示圖片原格式嗎？

這裏就要介紹下又拍雲的 WebP 自適應功能。

WebP 自適應功能會判斷客戶端瀏覽器是否支持 WebP 解碼，如支持則返回 WebP 格式圖片，不然返回原圖，客戶端以及源站無需任何改動。WebP 自適應開啓方式也很是簡單。只須要在又拍雲後臺點擊開啓鍵便可。

推薦閱讀

這些表情包你有嗎？來 Battle 啊

Doge.jpg 的背後是什麼，你知道麼？