# HTML 4. File path 應用

### absolute file path:

- 絕對位置:

我們在網路上隨便搜尋一張圖片，並且按下右鍵: 複製圖片網址

然後輸入到 src 裡頭，這個就是絕對位置 - absolute file path 的設定

    <img width="550" height="400" src="在此輸入你想要的網址" alt="這是一張熊貓圖片" />

### relative flie path (較推薦的做法):

- 相對位置:

也就是稍早我們使用自身電腦的資料夾，來引入這張圖片:

    <img width="550" height="400" src="./panda.avif" alt="這是一張熊貓圖片" />

- 絕大多數的情況下，我們工作時圖片並不會放在跟 html 擺在同一個頁面路徑，我們會需要一個資料夾 Floder 來存放整理:

---

#### 這是原本我的資料夾狀態：

#### 新增一個資料夾：

那麼這時候，我該如何去寫路徑，讓圖片能正確出現呢？

    <img width="550" height="400" src="./img/panda.avif" alt="這是一張熊貓圖片" />
     // . 當前位置 / img 目標資料夾 / 檔案名稱


- vscode 是個非常方便的編輯器，只要路徑輸入: . or .. 就會自動幫我們搜尋到相對應的路徑。

###### tags: `2022 網頁開發全攻略教程`