HTML图片标签路径解析
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>
页面显示：
HTML图片标签路径解析的更多相关文章
- cocos2d-x之 利用富文本控件解析xhml标签（文字标签，图片标签，换行标签，标签属性）
执行后效果: 前端使用: 后台SuperRichText解析code void SuperRichText::renderNode(tinyxml2::XMLNode *node){ while (n ...
- 使用import简化spring的配置 spring import 标签的解析 使用import或加载spring配置时，报错误There is no ID/IDREF 多个Spring配置文件import resource路径配置
spring-import 标签的解析.使用案例: 对于spring配置文件的编写,我想,对于经历过庞大项目的人,都有那种恐惧的心理,太多的配置文件.不过,分模块都是大多数人能想到的方法,但是,怎么分 ...
- 微信小程序使用wxParse，解决图片显示路径问题
我们经常用到发布文章,用的是UEditor百度富文本编辑器,方便排版,存储的也是html代码,这样小程序解析出来的也是排版的样式,但是使用wxParse解析html的时候,因为存储的是图片的相对路径, ...
- HTML入门(转义字符、行内样式和块级元素、定位、锚点、跑马灯标签、图片标签、表格标签的讲解)
一.转义字符由特殊字符包裹的文本 会当做标签去解析 对应不换行空格 对应全角空格 em是字体排印学的计量单位,相当于当前指定的点数.其占据的宽度正好是1个中文宽度,而且基本上不受字体影响.<对应 ...
- [19/06/04-星期二] HTML基础_实体(转义字符)、图片标签(img)、元标签(meta)、语法规范、内联框架(iframe)、超链接
一.实体(转义字符) 在HTML中,一些诸如<.> 就是普通的小于号和大于号不能直接使用,因为浏览可能会把它当成一个标签去解析,所以需要一些特殊字符去表示这些特殊字符, 这些字符我们称他们 ...
- HTML学习笔记——图片显示、图片跳转、图片相对路径
1>显示图片.用a标签实现点击图片跳转.地图标签/点击图片上固定区域跳转 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...
- webpack处理Img标签路径的几种情况
在使用webpack过程中遇到这个问题,各种搜索遇到此问题的还真不少,但都没有一个完整的说明. 后来研究下,图片除了路径替换还是就是图片做优化主是小于一定大小的通过转 base64 inline方式减 ...
- xamarin.android之 Android 4.4+ 获取图片真实路径
Android 4.4以下 选择图片是可以获取到图片路径的.高于Android 4.4获取图片路径只是获取到一个图片编号. 所以需要针对Android版本进行路径解析: #region 高于 v4.4 ...
- JSP Servlet 路径解析 路径设置
转自:http://ethen.iteye.com/blog/800415 在用JSP和Servlet编写Web应用时,经常遇到的问题就是找不到.do路径,或者.do路径不能解析,其实归根到底就是Se ...
随机推荐
- Linux性能调优之gprof和oprofile
为了更好的优化程序性能,我们必须找到性能瓶颈点,“好钢用在刀刃上”才能取 得好的效果,否则可能白做工作. 为了找到关键路径,我们可以使用profilng技术,在linux平台上,我们可以使用gprof ...
- GIt -- git push 远程分支老是需要重新输入公钥密码问题处理？
步骤: 先查看远程有哪些分支 删除远程分支,重新关联远程分支 最后再git push 到远程分支 git remote -v git remote rm RedisNote git remote a ...
- 初学ASP.NET 知识点
1.C# 中的虚方法 和 C++中的作用一致,能让指向子类的父类指针优先到子类中寻找方法,而不是直接调用父类中的方法. 看一段例子回忆下: namespace ConsoleApplication1 ...
- MySQL ERROR 1054(42S22)
修改用户的密码,网上搜到的命令为如下 执行后报错 ERROR 1054(42S22) Unknown column 'password' in ‘field list’ 错误的原因是 5.7版本下的m ...
- spring-cloud-hystrix-dasboard服务调用监控
除了隔离依赖服务的调用以外,hystrix还提供了准实时的调用监控(hystrix dashboard),hystrxi会持续的记录所有通过hyxtrix发起的请求的执行信息,并以统计报表和图形的形式 ...
- javascript中new Date()存在的兼容性问题
问题:通过new Date()创建的时间对象在Chrome能正常工作,但在IE浏览器却显示NaN 代码: var time = new Date(date + ' 00:00:00'); //NaN ...
- 论文阅读笔记四十八：Bounding Box Regression with Uncertainty for Accurate Object Detection(CVPR2019)
论文原址:https://arxiv.org/pdf/1809.08545.pdf github:https://github.com/yihui-he/KL-Loss 摘要 大规模的目标检测数据集在 ...
- Java Swing 编程 JComboBox 显示不全问题。
最近在做Java Swing编程一个小例子.然后遇到JComboBox 宽度固定,而下拉列表比较长,导致显示不全的问题. 解决的思路想到两种,1:下拉列表当显示不全的时候,换行显示.2:在下拉列表停几 ...
- ssh-copy-id使用非默认22端口时
http://blog.sina.com.cn/s/blog_541a3cf10101epzf.html
- Scrapyd 改进第二步: Web Interface 添加 STOP 和 START 超链接, 一键调用 Scrapyd API
0.提出问题 Scrapyd 提供的开始和结束项目的API如下,参考 Scrapyd 改进第一步: Web Interface 添加 charset=UTF-8, 避免查看 log 出现中文乱码,准备 ...