為什么我的圖像沒有顯示在html中？

Question

我正在嘗試將圖像添加到html頁面。 它應該相當簡單。 但是，該圖像拒絕顯示。

這是HTML

        <img src="/images/eiffel.jpg" alt="eiffel">

在野生動物園，我所得到的只是一個問號。 在chrome中，它只是帶有alt的圖標。 那是圖像所在的目錄，我的IDE會自動完成照片名稱，因此我知道我來對地方了。 那為什么不顯示呢？

Answer 1

如果您的圖片文件夾位於網頁上方的文件夾中，則在其后添加2個點將起作用。

<img src="../images/eiffel.jpg" alt="eiffel">

Answer 2

圖片應顯示的頁面網址是什么？ 請記住，通過使用斜杠來調用基本URL。 也許您可以使用完整的URL或在開始時刪除斜杠。

您也可以嘗試添加“”的先前答案。 在斜線之前。

希望能幫助到你。

Answer 3

src URL中的斜杠使路徑相對於網站的根，這是絕對路徑。

沒有斜杠，此路徑將相對於HTML文檔的位置。 如果此文檔不在網站根目錄下（例如： www.example.com/index.html ），則它將不會指向與第一個示例相同的位置。

例如，如果您的頁面URL是www.example.com/mysite/content/index.html則兩種變體將被解釋為：

src="images/eiffel.jpg"       -->  www.example.com/mysite/content/images/eiffel.jpg
src="/images/eiffel.jpg"      -->  www.example.com/images/eiffel.jpg

使用其他答案提到的點會產生微妙的不同結果：

src="./images/eiffel.jpg"     -->  www.example.com/mysite/content/images/eiffel.jpg
src="../images/eiffel.jpg"    -->  www.example.com/mysite/images/eiffel.jpg
src="../../images/eiffel.jpg" -->  www.example.com/images/eiffel.jpg

Answer 4

檢查以下步驟，這將有助於您解決圖像渲染問題。

1. 右鍵單擊並選擇Inspect Element
2. 單擊網絡選項卡搜索您的文件名
3. 雙擊您的圖像文件名。
4. 它將在您的Safari瀏覽器中打開。
5. 驗證圖像的絕對路徑。

您可以為每個瀏覽器遵循相同的技巧。

Answer 5

嘗試執行此操作，因為在我的代碼中我添加了這樣的代碼並且它起作用了。 我的代碼是img src =“ C：\\ Users \\ User \\ Desktop \\ HTML Programs \\ Proj \\ bgimg4.jpg”

You can use img src="\images\eiffel.jpg" alt="eiffel" use Markdown in here.
Please keep the above one in angular braces.