HTML标签的绝对路径和相对路径
我在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":"zhangguoli@123.com",
"url":"../../static/img/1.jpg"
},
{
"name":"张铁林",
"sex":"男",
"email":"zhangtieli@123.com",
"url":"../../static/img/2.jpg"
},
{
"name":"邓婕",
"sex":"女",
"email":"zhenjie@123.com",
"url":"/static/img/3.jpg"
},
{
"name":"张国立",
"sex":"男",
"email":"zhangguoli@123.com",
"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>
现在可以看到我们的运行结果了
HTML标签的绝对路径和相对路径的更多相关文章
- Html图像标签、绝对路径和相对路径：
Html图像标签: <img>标签可以在网页上插入一张图片,它是独立使用的标签,它的常用属性有: (1)src 属性 定义图片的引用地址 (2)alt 属性 定义图片加载失败时显示的文字, ...
- PHP(一般标签介绍，标签特性，实体名称，绝对路径与相对路径）
h1:为标题 h1~h6 标题会逐渐变小 需更换标签里面的数字 如: <h1>这是标题123</h1>---标题 <h2>这是标题123</h2>-- ...
- Servlet-base标签的作用（相对路径和绝对路径）
Web中的相对路径和绝对路径 在javaWeb中,路径分为相对路径和绝对路径: 相对路径: . 表示当前目录 .. 表示上一级目录 资源名 表示当前目录/资源名 绝对路径: http://ip ...
- Xcode 中的相对路径与绝对路径的相关设置
近日闲来无事,与博客园中闲荡,忽至一烟霞照耀祥瑞蒸熏松竹翠秀奇花遍开的神奇之地.如此美景,令人心生向往,故而徜徉于其中不可自拔,独乐乐不如众乐乐: iOS开发之 相对路径与绝对路径 https://d ...
- web项目中，视图层中关于相对路径和绝对路径
1.在jfinal项目中 因为一直使用的jfinal,没感觉路径问题. 举个栗子,项目名字叫做test.访问一个Controller的映射为/user/add.这样,在浏览器地址栏直接:localho ...
- iOS开发之Xcode 相对路径与绝对路径
iOS开发之 相对路径与绝对路径 https://developer.apple.com/library/mac/documentation/DeveloperTools/Reference/Xcod ...
- JavaWeb 项目中的绝对路径和相对路径以及问题的解决方式
近期在做JavaWeb项目,总是出现各种的路径错误,并且发现不同情况下 / 所代表的含义不同,导致在调试路径上浪费了大量时间. 在JavaWeb项目中尽量使用绝对路径 由于使用绝对路径是绝对不会出 ...
- XHTML 相对路径与绝对路径
文件路径 文件路径就是文件在电脑(服务器)中的位置,表示文件路径的方式有两种:相对路径和绝对路径. 路径标识: 标识符号 说明 / 路径标识 . 当前目录 .. 上一层目录 "." ...
- java web开发时的绝对路径与相对路径
相对路径 不以/开头的路径为相对路径,使用相对路径时的路径为当前访问的文件的父目录,即如果现在访问文件的路径为http://localhost:8080/项目名/目录/文件,那么使用相对路径时路径前缀 ...
随机推荐
- Sprite/MovieClip的Enter_Frame事件，不受addChild/removeChild影响
简单点讲:Sprite或MovieClip对象一旦为其添加了Enter_Frame事件监听,对应的Enter_Frame处理函数将会马上被调用,并一直执行下去(不管你是否将其addChild到显示列表 ...
- Selenium+Java的TestNG测试报告优化
本博主很懒,但学习很勤快,一般能从博客园直接转载的东西,本博主绝不动手写,无奈Selenium+java生成的测试报告在百度上搜索..反正我是没有看到.后来才知道TestNG它可以自动生成测试报告,但 ...
- MySql数据库命令行操作说明
MySql数据库操作说明 1. 使用电脑的运行cmd指令打开dos界面 2. 输入cd C:\Program Files\MySql\bin命令回车,进入mysqld目录 3. 输入mysql ...
- redis+Keepalived主从热备切换实例
[root@cache-redis-~/]# cat /etc/keepalived/keepalived.conf ! Configuration File for keepalived globa ...
- VXLAN实验
拓扑图: SPINE配置: hostname SPINE-1vdc SPINE-1 id 1 limit-resource vlan minimum 16 maximum 4094 limit-res ...
- 100-days: twenty-eight
Title: Lawrence Ferlinghetti's(劳伦斯·费林盖蒂) enduring San Francisco(旧金山) 劳伦斯·费林盖蒂心中的旧金山,历久弥新 费林盖蒂:美国垮掉的一 ...
- sql的日期和时间函数–date_format
Mysql的日期和时间函数–date_format DATE_FORMAT(date,format)依照 format 字符串格式化 date 值.下面的修饰符可被用于 format 字符串中:修 ...
- java 基础 ----- Arrays 工具类
----- Arrays 工具类是一个比较方便的类 常用的方法 也可以通过jdk文档进行查看 右侧有偶 对一些比较常用的方法进行演示 直接放在main方法中进行测试 ---- equ ...
- python note 15 正则表达式
# 正则表达式 只和字符串打交道 # 正则表达式的规则# 规则 字符串 从字符串中找到符合规则的内容 # 字符组 : [] 写在中括号中的内容,都出现在下面的某一个字符的位置上都是符合规则的 # [0 ...
- 大数据学习（二）-------- MapReduce
前提已经安装好hadoop的hdfs集群,可以查看 https://www.cnblogs.com/tree1123/p/10683570.html Mapreduce是hadoop的运算框架,可以对 ...