您可以做兩件事來修復(fù)未在瀏覽器上顯示的 HTML 圖片：

檢查標簽的src路徑<img>

檢查網(wǎng)站在生產(chǎn)主機上的緩存

本教程將解釋上述方法，從檢查src路徑開始

檢查 src 路徑以修復(fù)圖像不顯示

HTML 中的每個圖像都是通過使用帶有屬性<img>中指定的圖像源的標記來呈現(xiàn)的。src

您可以根據(jù)放置圖像的位置放置屬性的相對路徑或絕對路徑。

如果您的圖像本地保存在 HTML 文檔位置旁邊的文件夾中，則可以使用相對路徑。src

假設(shè)您的項目中有以下文件夾結(jié)構(gòu)：

html-project
├── image.jpeg
└── index.html

然后在index.html文件中，您可以使用以下標簽顯示圖像：

<img src="image.jpeg" />

當您的圖像是一個文件夾時，如下結(jié)構(gòu)：

html-project
├── assets
│   └── image.jpeg
└── index.html

然后您需要將文件夾添加assets到src屬性中，如下所示：

<img src="assets/image.jpeg" />

相對路徑也可以通過使用../模式上升到一個文件夾，所以如果你有以下結(jié)構(gòu)：

html-project
├── assets
│   └── image.jpeg
└── pages
    └── index.html

該index.html文件可以使用以下src屬性訪問圖像：

<img src="../assets/image.jpeg" />

當您有正確的路徑時，不要忘記檢查圖像擴展名并確保它src與實際圖像之間的相同。

有時，帶有.png擴展名的圖像會作為擴展名寫入src屬性.jpg。

圖像src路徑正確后，您需要檢查您的服務(wù)器是否可以訪問該圖像。

請記住，如果您使用 XAMPP、WAMP 或 MAMP 等本地開發(fā)服務(wù)器，則圖像必須位于開發(fā)文件夾中。

對于 WAMP，圖像必須在www/文件夾內(nèi)，而對于 XAMPP 和 MAMP，您需要將圖像放在htdocs/文件夾內(nèi)。

最后，如果您使用的是絕對路徑，請確保您沒有將本地硬盤路徑放置到該src屬性。

當您將網(wǎng)站聯(lián)機時，以下示例將不起作用：

<img src="file:///Users/nsebhastian/html-project/assets/image.jpeg" />

一旦您確認該圖像可在開發(fā)中訪問，該圖像可能仍會因為緩存而從您的生產(chǎn)站點中消失。

接下來我們看看如何清除緩存。

檢查緩存以修復(fù)圖像不顯示

圖像未顯示在網(wǎng)站上的一個原因是瀏覽器或服務(wù)器緩存仍在為訪問者提供舊的 HTML 頁面。

僅當您修改已發(fā)布的 HTML 文件以在頁面上包含新圖像時，才會發(fā)生這種情況。

根據(jù)您使用的瀏覽器，清除瀏覽器緩存可能會有所不同。

如果您使用的是 Chrome，則可以通過打開開發(fā)人員工具菜單然后右鍵單擊重新加載圖標來清除緩存。

在那里，您可以單擊Empty Cache and Hard Reload選項：

瀏覽器應(yīng)該刷新頁面并從您的服務(wù)器中提取新頁面。通過上述介紹相信大家對修復(fù)HTML頁面中未顯示圖片的方法已經(jīng)有所了解，大家如果想了解更多相關(guān)知識，可以關(guān)注一下動力節(jié)點的HTML教程，里面有更豐富的知識等著大家去學習，希望對大家能夠有所幫助哦。