瀏覽器解析html檔案src靜態資源路徑問題

1. 相對路徑
   src資源引號內部不以/分割符開頭，瀏覽器從當html檔案前路徑拼接url：
   場景a
   <img src="static/1.jpeg" width="258" height="39" />
   當前請求地址xxxx:80/html/1.html
   瀏覽器解析圖片地址為xxxx:80/html/static/1.jpeg

   場景b
   <img src="../static/1.jpeg" width="258" height="39" />
   當前請求地址xxxx:80/html/user/1.html
   瀏覽器解析圖片地址為xxxx:80/html/static/1.jpeg

2. 絕對路徑
   src資源引號內部以/開頭，代表從當前站點配置的根目錄開始拼接url
   場景a
   <img src="/static/1.jpeg" width="258" height="39" />
   當前請求地址xxxx:80/html/1.html
   瀏覽器解析圖片地址為xxxx:80/static/1.jpeg

   場景b
   <img src="/static/1.jpeg" width="258" height="39" />
   當前請求地址xxxx:80/html/user/1.html
   瀏覽器解析圖片地址為xxxx:80/static/1.jpeg

3. 網路資源路徑
   src是完整網路資源的url，由於涉及版權和盜鏈問題，一般不用。
   <img src="http://static.com/images/logo.png" width="300" height="120"/>

總結：使用相對路徑定位需要html檔案和靜態資源css,js,img等位置固定，不能動態調整，適用於測試開發階段。正式環境中，由於靜態資源一般會單獨配置儲存位置和快取，所以一般用絕對定位。比如nginx經常會對location /static/這種資源單獨配置，所以所有靜態資源都必須以/static開頭。一些web後端框架動態渲染頁面，路由url都是單獨配置，html檔案也是動態生成，此時必須用絕對定位。