HTML：圖片無法顯示？

Question

我是HTML的新手。 我正在嘗試在我的網站上顯示圖像，但出於某種原因，它只顯示一個帶有問號的藍色框。 我在互聯網上到處尋找，但沒有一個解決方案對我有用。 我試過了：

<img src="iwojimaflag.jpg"/>

<img src="images/iwojimaflag.jpg"/>

<img src="Applications/MAMP/htdocs/Symfony/src/Acme/WebBundle/Resources/public/images/iwojimaflag.jpg"/>

Answer 1

只是為了擴大niko的答案：

您可以通過其URL引用任何圖像。 無論它在哪里，只要它是可訪問的，你就可以將它用作src 。 例：

相對位置 ：

<img src="images/image.png">

相對於文檔的位置搜索圖像 。 如果您的文檔位於http://example.com/site/document.html ，則您的images文件夾應位於document.html文件所在的同一目錄中。

絕對位置 ：

<img src="/site/images/image.png">
<img src="http://example.com/site/images/image.png">

要么

<img src="http://another-example.com/images/image.png">

在這種情況下，您的圖片將從文檔網站的根目錄中搜索 ，因此，如果您的document.html位於http://example.com/site/document.html ，則根目錄位於http://example.com/ （或者它是服務器文件系統上的相應目錄，通常是www/ ）。 前兩個示例是相同的，因為兩者都指向同一主機，將第一個/作為服務器根的別名。 在第二種情況下，圖像位於另一個主機中，因此您必須指定圖像的完整URL。

關於/ ， . 和.. ：

/符號將始終返回文件系統或站點的根。

單點./指向您所在的同一目錄。

雙點../將指向上層目錄，或包含實際工作目錄的目錄。

因此，您可以使用它們構建相對路線。

給出路線http://example.com/dir/one/two/three/並且您的調用文檔位於three/內的示例：

"./pictures/image.png"

要不就

"pictures/image.png"

將嘗試在http://example.com/dir/one/two/three/找到名為pictures的目錄。

"../pictures/image.png"

將嘗試在http://example.com/dir/one/two/找到名為pictures的目錄。

"/pictures/image.png"

將嘗試在/或example.com直接找到名為pictures的目錄（它們是相同的），與directory處於同一級別。

Answer 2

讓我們看看引用圖像的方法。

回一個目錄

../

目錄中的文件夾：

 foldername/

文件在目錄中

 imagename.jpg

現在，讓我們將它們與您指定的地址結合起來。

 /Resources/views/Default/index.html
 /Resources/public/images/iwojimaflag.jpg

從html文件引用的第一個公共目錄是三個：

 ../../../

它位於兩個文件夾中：

 ../../../public/images/

你已經達到了這個形象：

 ../../../public/images/iwojimaflag.jpg

注意：這是假設您正在訪問您在評論中指定的domain.com/Resources/views/Default/index.html上的頁面。

Answer 3

如果你把<img src="iwojimaflag.jpg"/>放在html代碼中，那么將iwojimaflag.jpg和html文件放在同一個文件夾中。

如果你把<img src="images/iwojimaflag.jpg"/>然后你必須創建“images”文件夾並將圖像iwojimaflag.jpg放在該文件夾中。

Answer 4

 img { width: 200px; } 

 <img src="https://image.ibb.co/gmmneK/children_593313_340.jpg"/> <img src="https://image.ibb.co/e0RLzK/entrepreneur_1340649_340.jpg"/> <img src="https://image.ibb.co/cks4Rz/typing_849806_340.jpg"/> 

請看上面的代碼。

Answer 5

我承認沒有閱讀整個帖子。 然而，當我遇到類似的問題時，我發現仔細檢查文件名的大小寫並在HTML參考中糾正這個問題修復了類似的問題。 因此，Windows上的本地預覽有效，但當我發布到我的服務器（托管Linux）時，我必須確保“mugshot.jpg”更改為“mugshot.JPG”。 部分問題是Windows中的默認值隱藏文件類型指示后面的完整文件名。

Answer 6

我發現在文件和位置名稱周圍跳過引號“”顯示圖像...我在MacBook上這樣做....

Answer 7

以下是最常見的原因

• 文件路徑不正確

• 文件名拼寫錯誤

• 文件擴展名錯誤

• 文件丟失

• 尚未為圖像設置讀取權限

注意：在* nix系統上，請考慮使用以下命令為圖像添加讀取權限：

chmod o+r imagedirectoryAddress/imageName.extension

或者此命令為所有圖像添加讀取權限：

chmod o+r imagedirectoryAddress/*.extension

如果您需要更多信息，請參閱此文章 。