img src未連接到圖像路徑

Question

至少可以說圖像路徑令人沮喪的問題。 我只是想將圖像添加到站點。 img src沒有得到圖像。 我將該路徑作為背景圖像進行了測試，並且鏈接正常。 每當我將相同的確切路徑復制到img標簽時，都找不到它。 我什至沒有復制圖像的確切完整路徑。

繼承人的html：

    <div class='img_work1'>
                    <img src=../img/screenshotonce.png/>
                    <div class='caption'>
                        <h2>Website</h2>
                    </div>
                </div>

這是背景圖片的CSS（起作用的部分）

   .img_work1{
height:300px;
position:relative;
margin-top:2em;
margin-bottom:15%;
background-image:url('../img/screenshotonce.png');

我添加了兩個鏈接只是為了表明img src鏈接與背景圖像路徑完全相同，但是沒有顯示。

Answer 1

這是一個錯字，但很有趣，所以我給出一個答案：

在HTML中，與XHTML和其他XML語言相反，void元素（也稱為自動關閉）在last >之前不應帶有/ 。

在最罕見的情況之一中，您感到很重要。

因為HTML也是非常寬松的，所以它允許您不將屬性的值包裝在" 。

但是，當您將這兩個錯誤結合在一起時，就不會像您希望的那樣對屬性進行解析：

<img src=abc.xyz/>會將src屬性設置為"abc.xyz/" ，而不是"abc.xyz" 。

 console.log(i.src); 

 <img id="i" src=abc.xyz/> 

對於瀏覽器，這意味着“ abc.xyz”指向目錄，因此圖像無法加載。

因此，您可以通過以下方式解決此問題：將src屬性包裝在"內，或在標簽末尾用>替換此/> ，或者應該兩者都修復：

<img src="abc.xyz">

---

[edit]既然我們已經了解了OP的文件路徑的更多信息。

另外，css url()函數中的url()相對於樣式表。

對於CSS樣式表，基本URL是樣式表本身的URL，而不是樣式化源文檔的URL。

^{來自url() CSSWG規范}

因此，如果您的css文件與html不在同一目錄中，則它可能必須不同。

Answer 2

您設置了圖像權限嗎？ 如果沒有先設置，例如，如果您使用linux os，則可以鍵入

chmod 777 /pathimage/nameimage.jpg

Answer 3

您的語法如下：

1. <img src="http://localhost/path/to/image">
2. <img src="/path/to/image">

如果不能解決問題，請再次檢查。 按Ctrl（命令） + Shift + I （檢查元素），然后檢查是否有任何CSS規則應用於該圖像。 查找任何導致圖像顯示不正確的內容。