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 ...
随机推荐
- C++入门篇十二
成员变量和成员属性: 静态成员函数和静态成员变量是不属于对象的,所以不占有空间,非静态成员是属于对象的,占有存储空间,空类大小1 #include "pch.h" #include ...
- 源码解析Django CBV的本质
Django CBV模式的源码解析 通常来说,http请求的本质就是基于Socket Django的视图函数,可以基于FBV模式,也可以基于CBV模式. 基于FBV的模式就是在Django的路由映射表 ...
- jQuery基础操作
1.jQuery的介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交 ...
- Microsoft Graph API -----起题 Graph API
最近因为工作需要,接触学习使用了Microsoft Graph API.在看完Microsoft的Graph官方文档之后,也做了一些简单的案例,在Stack Overflow上做过一些回答.整体来说, ...
- ELK搭建<三>：安装Kibana
1.下载Kibana,如果需要低版本的,低版本下载 2.解压后,进入config修改配置文件kibana.yml : #运行的端口号 server.port: 5601 #服务器地址 server.h ...
- Centos7源码安装mariadb
mariadb官网:http://mirrors.opencas.cn/mariadb 安装开发工具: yum grouplist yum groupinstall "Development ...
- @angular/cli (angular脚手架) 如何降级
1.卸载 npm uninstall -g @angular/cli 2.清除缓存 npm cache verify 3.查看是否卸载成功 ng v //如果显示ng 不是内部或外部的指令 则证明卸载 ...
- 2018年最新JAVA面试题总结之JavaWeb（2）
转自于:https://zhuanlan.zhihu.com/p/39522575 1.tomcat的优化方式?回答:Tomcat的优化我准备从三方面来说: 第一部分: 内存优化Tomcat的默认内存 ...
- asp.net table/gridview 合并列
public void MergeCell(TableRow trow) { TableCell currentCell = trow.Cells[0]; TableCell prevCell = n ...
- 设置Jexus开机启动
一.如需要开机没有登陆情况下就能运行的程序,存在系统服务(system)里,即:/lib/systemd/system/ ,服务以.service结尾 cd /lib/systemd/system/ ...