HTML標籤的絕對路徑和相對路徑
阿新 • • 發佈：2018-12-05
我在javaweb中寫json的Demo的時候遇到了這個問題，圖片一一直取不出來，查了好久終於解決了，所以現在記錄一下。
絕對路徑:
其實很容易理解，如果你是一個普通的專案，那就是它在你電腦裡真實存在的位置，比如說"F:/img/1.jpg"。而像我是在javaweb中專案中引用，那麼絕對路徑以你的伺服器為基準的(http://localhost:8080)。
比如我的目錄是這樣
那麼我的絕對路徑就是：
"http://localhost:8080/static/img/4.jpg"
相對路徑:
顧名思義，就是想對於當前網頁的路徑。
上面檔案結構圖不夠全面，再放一張我的jsp頁面所在的位置
那麼現在我如果在m01.jsp頁面使用<img>標籤新增img目錄下的圖片該怎麼寫呢？
在寫之前我們還要知道 ./和../分別代表的是當前檔案所在的目錄和當前所在檔案的上一級目錄，當然我們也可以使用多個../返回多級目錄。
所以我們使用相對路徑就可以這樣寫:
"../../static/img/1.jpg"//相對於 m01.jsp位於webapp/WEB-INF/views 目錄下 來說，1.jpg位於webapp/static/img 目錄下，所以我們需要返回兩級目錄。
而在javaweb中，相對路徑分為兩種，一種就是上面的，找資源，以當前的資源所在的路徑為基準。另一種是以"/"開頭的相對虛擬路徑，它代表的是以當前伺服器的路徑為基準(http://localhost:8080)的。
所以我們這裡相對路徑還有另外一種寫法:
"/static/img/3.jpg"
好了，現在可以看一下我們整個Demo執行的情況吧。
例子稍稍有點複雜，其實用<img>標籤新增影象就可以了，只不過我本來就是測試json的demo就懶得再寫了。
item.json
[ { "name":"張國立", "sex":"男", "email":"[email protected]", "url":"../../static/img/1.jpg" }, { "name":"張鐵林","sex":"男", "email":"[email protected]", "url":"../../static/img/2.jpg" }, { "name":"鄧婕", "sex":"女", "email":"[email protected]", "url":"/static/img/3.jpg" }, { "name":"張國立", "sex":"男", "email":"[email protected]", "url":"http://localhost:8080/static/img/4.jpg" } ]
可以看到這裡的url就是我們需要寫的相對路徑和絕對路徑。
m01.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<script src="${pageContext.request.contextPath}/static/jquery-3.3.1.js"></script>
<title>Title</title>
<style type="text/css">
.p1{
font-size: 14px;
color: #000;
}
.p2{
font-size: 12px;
color: #b0b0b0;
}
.p3{
font-size: 14px;
color: #ff5f19;
}
.product{
width:100%;
position: relative;
margin: 20px 0 5px 0;
height: 100px;
background: #fafafa;
}
.img{
width: 100px;
height: 100px;
float: left;
margin-right: 20px;
}
.p{
display:inline-block;
float:left;
width:50%;
margin-top:6px;
font-family: Microsoft YaHei;
}
.p1{
margin-top:16px;
}
</style>
<script>
//頁面載入
$(function(){
$.ajax({
type: "POST",//請求方式
url: "${pageContext.request.contextPath}/static/json/item.json",//地址，就是json檔案的請求路徑
dataType: "json",//資料型別可以為 text xml json script jsonp
success: function(result){
debugger;
addBox(result);
}
});
});
function addBox(result){
//result是一個集合,所以需要先遍歷
$.each(result,function(index,obj){
debugger;
$("#box").append("<div class='product'>"+//獲得圖片地址
"<div><img class='img' src="+obj['url']+"></div>"+
//獲得名字
"<div class='p1 p'>"+obj['name']+"</div>"+
//獲得性別
"<div class='p2 p'>"+obj['sex']+"</div>"+
//獲得郵箱地址
"<div class='p3 p'>"+obj['email']+"</div>"+
"</div>");
});
}
</script>
</head>
<body>
<div id="box">
</div>
</body>
</html>
現在可以看到我們的執行結果了
