skip to main content

加入本地圖檔,學會利用相對路徑和絕對路徑指明檔案位置

於2020年02月18日發佈


上次講過你怎樣加入外部在其他網站上的圖檔,用那個html tag你記得嗎? 忘了的話記得先回上一課看看複習下。

路徑 - 加入本地圖檔前先要了解的東西

本地圖檔(Local Image)意思即要貼到網頁的圖片在你的電腦上,現在問題是在你電腦上的圖片沒有一個網址,要告訴html圖片在電腦那處我們要學會寫一點簡單路徑

路徑有兩種相對路徑 (Relative Path)絕對路徑 (Absolute Path)

絕對路徑 (Absolute Path)

絕對路徑就是完整,完全,詳細地址,在該台電腦中是絕對唯一一個地址的意思。

以下是一個絕對路徑例子

C:\Users\houhk\Desktop\images\

在你電腦上任何一個資料夾都可以找到相應的絕對地址,只要好像下圖一樣點一點左邊的檔案icon就可以看到完全的絕對路徑

顯示絕對路徑方法

考下你:這張圖的絕對路徑 (Absolute Path)是甚麼?

猜絕對路徑練習





答案是
C:\Users\houhk\Desktop\images\example.jpg

知道獲取圖片的路徑後你就可以好像上一次一樣將路徑放到src屬性裡,以我這個例子,加上上次教過你怎樣按比例調整圖片大小,養成好習慣寫alt屬性的描述,就會這樣寫

<img src="C:\Users\houhk\Desktop\images\example.jpg 
width="250px" 
alt="梁浩賢">

這樣你應該可以順利將你電腦上的圖片加到你的網頁中

但是!我們不會用絕對路徑(Absolute Path)來做網頁,而是用跟著我會介紹的相對路徑 (Relative Path)

相對路徑 (Relative Path)

相對路徑 (Relative Path)有兩個關鍵性符號要你記住,分別是

現在我會用三個例子教你怎樣以你的index.html為主,為根據地,利用./相對路徑去指定圖片位置


第一個例子 : index.html和example.jpg都在同一個資料夾中時
html和圖檔放在同一個資料夾
這樣指明src屬性

<img src="./example.jpg 
width="250px" 
alt="梁浩賢">


第二個例子 : index.html隔了一層,example.jpg在image資料夾裏面都在同一個資料夾中時
圖檔處於image folder裏
這樣指明src屬性

<img src="./image/example.jpg 
width="250px" 
alt="梁浩賢">


通常指向圖片位置來說../很少用到,以下這個往上指向的用法你記得的話就記住吧。

第三個例子 : index.html處在底層,放於html這個資料夾裏,example.jpg在上一層時,在html碼中就要這樣指向圖片位置

圖檔在html的上一層
這樣指明src屬性
<img src="../example.jpg 
width="250px" 
alt="梁浩賢">

為甚麼做網站需要用到相對路徑

原因是:

  1. 當你發發佈這網頁時,需要上傳這網頁去另一台電腦主機
    你覺得C:\Users\houhk\Desktop\images\這路徑在另一台主機會存在嗎?
    可能吧,但不一定。

    如果另一台電腦主機沒有這路徑的話就會導致圖片檔案位置錯誤,顯示不了圖片。
  2. 使用相對路徑的話,你將整個資料夾上傳到另一台電腦主機後,因為html是以它自己的位置開始地指向出相對圖檔位置。
    就像HTML自己在說:總之example.jpg是在我上一層/下一層的image folder裏,所以不論另一台主機電腦裏的資料夾是怎樣,網頁仍然可以正確顯示圖檔

所以在寫網站的絕大部份情況下都會使用相對路徑 (Relative Path)

路徑這個東西難到你了嗎?

你可以多加幾個圖片,練習個五到十次你應該會掌握這個概念的了,加油!

下一節課

直接顯示於用戶面前的,即<body> </body>中的HTML tag已經介紹了好幾課,接下來我會來講下HTML的最基本完整結構,和用戶基本不會在瀏覽器內容部份看到的HTML 頭部<head> </head>的必要元素。

→到下一節課 : HTML最基本完整結構認知 - 網頁頭部和頭裏的三寶

本文作者

網站位置 : 加入本地圖檔,學會利用相對路徑和絕對路徑指明檔案位置

←返回首頁   返回頁頂↑