上一篇用簡單文字介紹了屬性的簡介和其特色，接著想跟大家做更多屬性的應用。今天要介紹的屬性是 src。

常會使用在<img>標籤上，那它的實際應用可見下方

<img src="value">

還記得我們上一章節提到的，attribute(屬性)=“value(值)”
這裡的 src 其實是 source 來源的縮寫，如果用在 img 的標籤裡，通常它所接的值是網頁位址(URL)，稱為絕對路徑；或是後面接資料夾的位置所在，被稱為相對路徑。

什麼是絕對路徑

通常都是一個絕對的位置，常見的有以下兩種：
提供指定的位址：例如圖片的 URL
如果使用絕對路徑來標記自己電腦裡的檔案，在本機觀看顯示基本上應該都不會出問題，但是若是上傳到網路空間，可能會因為找不到對應檔案而無法正常顯示圖片。

什麼是相對路徑

以當前 HTML 頁面文件的路徑，一層層地標註對應位置。
例如我在這個專案的資料夾開了一個叫做 picture 的資料夾，並在裡面放上一張名稱是 cat 的圖片，這時候就用相對路徑標出該檔案位置即可

因此你這裡可以寫成：

<img src="picture/cat.jpg">

在標為位置之前，有幾個關鍵符號要記得

• 如果所需圖檔在同個資料夾的話的話，cat.jpg => 同層目錄中的 jpg 檔

<img src="cat.jpg">

• ./：代表所需圖檔在同層目錄的另一個資料夾，./picture/cat.jpg => 同層目錄中的 picture 資料夾，裡面的 css 檔

<img src="./picture/cat.jpg">

• ../：文件的上一層目錄，../picture/cat.jpg => 上一層目錄的資料夾，裡面的圖檔

<img src="../picture/cat.jpg">

建議用相對路徑來找到對應的圖片，這樣的好處是，如果你的專案放到網路上，才不會發生找不到檔案的窘境。