多用戶在使用谷歌瀏覽器時(shí)，可能也遇到過圖片無法顯示的問題，這嚴(yán)重影響了網(wǎng)頁瀏覽體驗(yàn)。接下來小編將為大家分析圖片不顯示的原因以及解決方案，希望能夠幫助到你。

一、谷歌瀏覽器不顯示圖片原因分析

1、網(wǎng)絡(luò)連接問題：當(dāng)網(wǎng)絡(luò)連接不穩(wěn)定或速度過慢時(shí)，圖片可能無法正常加載。此外，如果瀏覽器使用的是不安全的HTTP連接，而網(wǎng)站支持更安全的HTTPS連接，那么瀏覽器可能會(huì)阻止圖片的加載。

2、瀏覽器設(shè)置問題：用戶可能在設(shè)置中選擇了減少數(shù)據(jù)使用或在隱私設(shè)置中選擇了屏蔽圖片，這會(huì)導(dǎo)致圖片無法顯示。另外，禁用JavaScript也可能導(dǎo)致圖片無法正常加載。

3、網(wǎng)站本身的問題：如果網(wǎng)站使用了不安全的鏈接（如http而非https），或者服務(wù)器出現(xiàn)問題，都可能導(dǎo)致圖片無法正常加載。另外，部分網(wǎng)站可能有特定的問題，導(dǎo)致只有該網(wǎng)站上的圖片無法顯示。

4、瀏覽器緩存和Cookie問題：過多的緩存文件和Cookie可能導(dǎo)致圖片加載失敗。清除這些緩存和Cookie通常可以解決問題。

5、瀏覽器擴(kuò)展干擾問題：一些瀏覽器擴(kuò)展，尤其是用于自定義瀏覽器外觀的擴(kuò)展程序，可能會(huì)阻止圖片的加載。檢查并禁用這些擴(kuò)展可能恢復(fù)圖片的正常顯示。

6、瀏覽器版本問題：過時(shí)的瀏覽器版本可能不支持當(dāng)前網(wǎng)頁使用的技術(shù)，導(dǎo)致圖片無法正常加載。確保瀏覽器保持最新版本是避免此類問題的關(guān)鍵。

7、硬件加速問題：有時(shí)候，硬件加速功能可能會(huì)導(dǎo)致瀏覽器遲緩或崩潰，同時(shí)也可能阻礙圖片的加載。關(guān)閉這一功能可能有助于解決問題。

二、谷歌瀏覽器不顯示圖片解決方法

1. 網(wǎng)絡(luò)連接問題

檢查網(wǎng)絡(luò)穩(wěn)定性：確保網(wǎng)絡(luò)連接穩(wěn)定，嘗試重啟路由器或切換到不同的網(wǎng)絡(luò)連接。

使用有線連接：如果可能，使用有線連接代替無線連接，以提高網(wǎng)絡(luò)速度和穩(wěn)定性。

2. 瀏覽器設(shè)置問題

禁用數(shù)據(jù)節(jié)省模式：在Chrome瀏覽器設(shè)置中禁用數(shù)據(jù)節(jié)省模式，以免其阻止圖片加載。

調(diào)整隱私設(shè)置：確保隱私設(shè)置不會(huì)過于嚴(yán)格，允許所有網(wǎng)站顯示圖片。

啟用JavaScript：確保瀏覽器沒有禁用JavaScript，因?yàn)樵S多網(wǎng)站依賴JavaScript來加載圖片。

3. 網(wǎng)站本身問題

檢查網(wǎng)站安全性：確認(rèn)網(wǎng)站使用安全的HTTPS連接，避免訪問使用不安全HTTP連接的網(wǎng)站。

清除網(wǎng)站數(shù)據(jù)：針對(duì)特定網(wǎng)站清除緩存和Cookie，以解決網(wǎng)站特定的加載問題。

4. 瀏覽器緩存和Cookie問題

清除緩存：定期清除瀏覽器緩存，以解決因存儲(chǔ)數(shù)據(jù)過多導(dǎo)致的圖片加載問題。

管理Cookie：管理網(wǎng)站的Cookie設(shè)置，確保網(wǎng)站可以存儲(chǔ)必要的Cookie以正常顯示圖片。

5. 瀏覽器擴(kuò)展干擾

禁用擴(kuò)展：臨時(shí)禁用所有擴(kuò)展，然后逐一重新啟用，以識(shí)別并禁用可能導(dǎo)致圖片加載失敗的擴(kuò)展。

更新擴(kuò)展：確保所有擴(kuò)展都更新到最新版本，以避免兼容性問題。

6. 瀏覽器版本問題

更新瀏覽器：確保Chrome瀏覽器是最新版本，以修復(fù)已知的錯(cuò)誤和兼容性問題。

重置瀏覽器設(shè)置：如果問題持續(xù)存在，嘗試重置瀏覽器設(shè)置到默認(rèn)狀態(tài)。

7. 硬件加速問題

關(guān)閉硬件加速：在瀏覽器設(shè)置中關(guān)閉硬件加速功能，以解決可能的顯示問題。

三、谷歌瀏覽器不顯示圖片預(yù)防措施

1、定期檢查和更新瀏覽器：確保Chrome瀏覽器始終是最新版本，以修復(fù)已知的錯(cuò)誤和兼容性問題。這有助于避免因過時(shí)的瀏覽器版本導(dǎo)致的問題。

2、保持網(wǎng)絡(luò)連接穩(wěn)定：確保網(wǎng)絡(luò)連接穩(wěn)定并具有足夠的帶寬。使用有線連接代替無線連接可以提高網(wǎng)絡(luò)速度和穩(wěn)定性，從而減少圖片加載失敗的機(jī)會(huì)。

3、調(diào)整瀏覽器設(shè)置：在瀏覽器設(shè)置中禁用數(shù)據(jù)節(jié)省模式，以免其阻止圖片加載。同時(shí)，調(diào)整隱私設(shè)置，允許所有網(wǎng)站顯示圖片，并確保沒有禁用JavaScript，因?yàn)樵S多網(wǎng)站依賴JavaScript來加載圖片。

4、管理瀏覽器擴(kuò)展：定期檢查和管理瀏覽器擴(kuò)展，確保它們不會(huì)干擾網(wǎng)頁的正常顯示。臨時(shí)禁用所有擴(kuò)展，然后逐一重新啟用，以識(shí)別并禁用可能導(dǎo)致圖片加載失敗的擴(kuò)展。

5、清除緩存和Cookie：定期清除瀏覽器緩存和Cookie，以解決因存儲(chǔ)數(shù)據(jù)過多導(dǎo)致的圖片加載問題。這有助于保持瀏覽器的正常運(yùn)行，并減少?zèng)_突的可能性。

6、小心設(shè)置例外情況：在瀏覽器的內(nèi)容設(shè)置中，小心設(shè)置任何可能阻止圖片加載的例外情況。避免將常用網(wǎng)站添加到不顯示圖片的黑名單中，以免不小心攔截了這些網(wǎng)站的圖片加載。

希望通過本文的介紹之后，您可以有效地減少谷歌瀏覽器不顯示圖片的問題，感謝大家的閱讀。

本文由www.chrome64.com站點(diǎn)的作者進(jìn)行編寫，轉(zhuǎn)載時(shí)請(qǐng)進(jìn)行標(biāo)注。

嘍大家好，我是胖達(dá)。本期視頻來看看路徑相關(guān)的內(nèi)容。我們知道在網(wǎng)頁中存在很多的圖片，如果把這些圖片和html文檔放在一起，這樣不光不美觀，管理起來也非常不方便。通常會(huì)新建一個(gè)專門用來管理圖像資源的文件夾，當(dāng)需要查找圖像的時(shí)候就會(huì)選擇使用路徑的方式來指定圖像文件的位置。

路徑的類型又分為兩種，第一種是相對(duì)路徑，第二種是絕對(duì)路徑。今天先來了解一下相對(duì)路徑。相對(duì)路徑是相對(duì)于當(dāng)前文件的位置來表示資源，也就是圖片位置的路徑表達(dá)方式。簡(jiǎn)單來說就是圖片相對(duì)于當(dāng)前html文檔的位置。這里把相對(duì)路徑的分類給大家列出來了，一個(gè)一個(gè)往下看。

·首先是同級(jí)路徑。同級(jí)路徑不需要在html里面寫任何符號(hào)，只需要將文件名寫到html屬性里就可以了。在代碼里看一下，這里有一個(gè)image，點(diǎn)jpg的圖片和html文檔處于同一級(jí)，所以在html的屬性里直接寫image，點(diǎn)jpg保存一下看看效果。

可以看到現(xiàn)在圖片是正常展示的，同級(jí)路徑下只需要在html屬性里完整填寫圖像文件的名稱就可以了。

·再來看第二個(gè)下級(jí)路徑。當(dāng)圖像文件位于html文件下一集時(shí)，需要在html屬性里完整填寫同級(jí)文件夾的名稱，然后斜杠寫出對(duì)應(yīng)圖片文件的名稱。

→首先打開資源文件夾，在這里新增一個(gè)images的文件夾。將image圖片文件復(fù)制一份放到images文件夾里。

→打開vscode，新建一個(gè)gtml文檔，這里新增一個(gè)image標(biāo)簽。

→在左側(cè)資源管理器中剛剛新增的images文件夾已經(jīng)顯示出來了，打開以后會(huì)發(fā)現(xiàn)里面有一個(gè)image，點(diǎn)jpg的圖片。把這個(gè)路徑寫一下，在src屬性里面寫入位于當(dāng)前html文件同級(jí)的images文件夾的名稱，使用符號(hào)斜杠找到image，點(diǎn)gpg，看一下效果。此時(shí)圖片也完整顯示出來了。

→如果在amager四文件夾里還有一個(gè)amager四文件夾，下級(jí)路徑又該怎么寫？在amager文件夾里再新建一個(gè)文件夾，打開vscod，在左側(cè)的資源管理器中a major s文件夾下面又新增了一個(gè)a major s文件夾，在這里面又放了一張圖片。

這張圖片應(yīng)該怎樣讓它展示出來？一起來看一下。

→首先找到同級(jí)的images文件夾，使用符號(hào)斜杠，此時(shí)vscode會(huì)提供給兩個(gè)選項(xiàng)，一個(gè)是imagers文件夾，另一個(gè)是imager.gpg。選擇imagers，imagers文件夾里面的imager.gpg的文件了，保存一下看看效果。

在瀏覽器中這兩張圖片都完美的展現(xiàn)出來了。

最后來看一下相對(duì)路徑里面的。上級(jí)路徑使用的符號(hào)是點(diǎn)點(diǎn)杠。上級(jí)路徑又應(yīng)該怎么理解？也就是圖像文件是位于當(dāng)前這個(gè) hd ml文件的上一集。

在練習(xí)文件夾里新增一個(gè)名為 hd ml的文件夾，打開vs code，選擇剛剛新增的文件夾，選擇新建文件，這里需要新增一個(gè) hd ml文檔。在當(dāng)前 hd ml文檔中，如果想要調(diào)用上一級(jí)的 image 點(diǎn) j p g 的圖片應(yīng)該怎么做？在 sr c 屬性里面使用點(diǎn)點(diǎn)杠。

這里 vs code提供了上一集路徑中存在的文件，選擇 image 點(diǎn) j p g，在瀏覽器中看下效果，此時(shí)圖片也是正常顯示的。如果hd ml文件藏得更深一些，把當(dāng)前的文件復(fù)制一份，新增一個(gè)hd ml文件夾，將復(fù)制的文檔粘貼一下，打開剛剛復(fù)制的文檔，修改sr c屬性里面的值，使用點(diǎn)點(diǎn)杠。

此時(shí)是沒有找到 amage 點(diǎn) j p g 的文件，這個(gè)時(shí)候就需要重復(fù)剛剛的操作，點(diǎn)點(diǎn)杠就能找到需要到的 amage 點(diǎn) jbg 的文件了，保存一下看看效果。這里可以看到圖片還是正常顯示出來了。

本期視頻主要了解了相對(duì)路徑的三種分類，一個(gè)是同級(jí)路徑，一個(gè)是下級(jí)路徑，還有一個(gè)是上級(jí)路徑。希望小伙伴們下來可以好好練習(xí)一下，這對(duì)于后期的內(nèi)容非常重要。下期再來聊聊絕對(duì)路徑。本期的內(nèi)容到此結(jié)束，感謝觀看，下期再見。

import avatar from './../assets/avatar.png' 
 
export default {
 data () {
 return {
 src: avatar
 }
 }
}