img標簽中src屬性表示的是引用的圖片路徑，有兩種路徑類型： 1. 絕對路徑 2. 相對路徑。
絕對路徑：使用圖片在硬盤上的絕對位置來訪問圖片，通常是從根目錄開始，向下一個目錄一個目錄的尋找。mac查看圖片絕對路徑方法：
打開終端:
然后會出來一個白色的框：
然后把圖片拖入這個白色的框里：
這個框里顯示的路徑就是絕對路徑。
下面先測試一下使用絕對路徑的img標簽：
下面是圖片和html文件的結構：
通過上面的看絕對路徑的方法查看了這個current.jpg的絕對路徑是： /Users/caiyao/Desktop/圖片引用測試/html_folder/current.jpg
html文件代碼如下：
<html> <head> </head> <body> <img src = "/Users/caiyao/Desktop/圖片引用測試/html_folder/current.jpg"/> </body> </html>
頁面顯示為：
可以正常顯示。
還有一種路徑寫法是相對路徑，就是圖片相對於當前html文件的路徑，有兩個特殊的符號 【..】兩個點表示相對於當前html文件的上級文件夾。 【.】一個點表示的就是當前文件，比如有如下這樣的文件結構：
層次為：桌面 -> 桌面引用測試 -> html_folder -> inner -> inner_inner
在這個層次里由幾個圖片文件，分別為:outer.jpg current.jpg inner.jpg inner_inner.jpg 這四個圖片文件。如何根據上面說的相對路徑的規則寫這幾個圖片相對於test.html文件的相對路徑？
outer.jpg: ../outer.jpg 這是outer.jpg的相對於test.html的相對路徑。 上面說了..表示相對於html文件的上級，../out.jpg標識的就是相對於這個html文件的上級文件夾里有個outer.jpg這樣一個圖片文件。
下面測試一下在頁面里顯示outer.jpg這個圖片的代碼:
<html> <head> </head> <body> <img src = "../outer.jpg"/> </body> </html>
頁面顯示效果：
頁面顯示正常。
current.jpg： ./current.jpg 一個點表示的是當前文件夾，那./current.jpg表示的就是相對於當前文件夾下的一個名字為current.jpg的圖片文件。
測試代碼：
<html> <head> </head> <body> <img src = "./current.jpg"/> </body> </html>
頁面顯示效果：
inner.jpg : ./inner/inner.jpg。 一個點表示的是當前文件夾，./inner/inner.jpg表示的是當前文件夾下的inner文件夾里的名字為inner.jpg的圖片。
測試代碼：
<html> <head> </head> <body> <img src = "./inner/inner.jpg"/> </body> </html>
頁面效果：
inner_inner.jpg： ./inner/inner_inner/inner_inner.jpg。 找inner_inner.jpg的過程為： 當前文件夾下有個inner文件夾，然后inner文件夾下還有個inner_inner文件夾，圖片就是inner_inner文件夾下的名字為inner_inner.jpg的圖片文件。
測試代碼為：
<html> <head> </head> <body> <img src = "./inner/inner_inner/inner_inner.jpg"/> </body> </html>
頁面顯示：
