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图片标签路径解析的更多相关文章

  1. cocos2d-x之 利用富文本控件解析xhml标签（文字标签，图片标签，换行标签，标签属性）

    执行后效果: 前端使用: 后台SuperRichText解析code void SuperRichText::renderNode(tinyxml2::XMLNode *node){ while (n ...

  2. 使用import简化spring的配置 spring import 标签的解析 使用import或加载spring配置时，报错误There is no ID/IDREF 多个Spring配置文件import resource路径配置

    spring-import 标签的解析.使用案例: 对于spring配置文件的编写,我想,对于经历过庞大项目的人,都有那种恐惧的心理,太多的配置文件.不过,分模块都是大多数人能想到的方法,但是,怎么分 ...

  3. 微信小程序使用wxParse，解决图片显示路径问题

    我们经常用到发布文章,用的是UEditor百度富文本编辑器,方便排版,存储的也是html代码,这样小程序解析出来的也是排版的样式,但是使用wxParse解析html的时候,因为存储的是图片的相对路径, ...

  4. HTML入门(转义字符、行内样式和块级元素、定位、锚点、跑马灯标签、图片标签、表格标签的讲解)

    一.转义字符由特殊字符包裹的文本 会当做标签去解析 对应不换行空格 对应全角空格 em是字体排印学的计量单位,相当于当前指定的点数.其占据的宽度正好是1个中文宽度,而且基本上不受字体影响.<对应 ...

  5. [19/06/04-星期二] HTML基础_实体(转义字符)、图片标签(img)、元标签(meta)、语法规范、内联框架(iframe)、超链接

    一.实体(转义字符) 在HTML中,一些诸如<.> 就是普通的小于号和大于号不能直接使用,因为浏览可能会把它当成一个标签去解析,所以需要一些特殊字符去表示这些特殊字符, 这些字符我们称他们 ...

  6. HTML学习笔记——图片显示、图片跳转、图片相对路径

    1>显示图片.用a标签实现点击图片跳转.地图标签/点击图片上固定区域跳转 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...

  7. webpack处理Img标签路径的几种情况

    在使用webpack过程中遇到这个问题,各种搜索遇到此问题的还真不少,但都没有一个完整的说明. 后来研究下,图片除了路径替换还是就是图片做优化主是小于一定大小的通过转 base64 inline方式减 ...

  8. xamarin.android之 Android 4.4+ 获取图片真实路径

    Android 4.4以下 选择图片是可以获取到图片路径的.高于Android 4.4获取图片路径只是获取到一个图片编号. 所以需要针对Android版本进行路径解析: #region 高于 v4.4 ...

  9. JSP Servlet 路径解析 路径设置

    转自:http://ethen.iteye.com/blog/800415 在用JSP和Servlet编写Web应用时,经常遇到的问题就是找不到.do路径,或者.do路径不能解析,其实归根到底就是Se ...

随机推荐

  1. 深度探索C++对象模型

    深度探索C++对象模型 什么是C++对象模型: 语言中直接支持面向对象程序设计的部分. 对于各个支持的底层实现机制. 抽象性与实际性之间找出平衡点, 需要知识, 经验以及许多思考. 导读 这本书是C+ ...

  2. 0ctf 2019 zero_task

    一个条件竞争的洞,以前没有接触过.比赛完研究了wp复现下. new_thread结构体如下 new_thread: thread_area size0x8 thread_area+0x8 size 0 ...

  3. 【原创】大叔经验分享（51）docker报错Exited (137)

    docker container启动失败,报错:Exited (137) *** ago,比如 Exited (137) 16 seconds ago 这时通过docker logs查不到任何日志,从 ...

  4. php 常用的知识点归集（下）

    24.静态属性与静态方法在类中的使用 需求:在玩CS的时候不停有伙伴加入,那么现在想知道共有多少人在玩,这个时候就可能用静态变量的方法来处理 利用原有的全局变量的方法来解决以上的问题 <?php ...

  5. git clone pytorch或caffe2速度慢的解决办法

    caffe2官方代码,现在已经放在pytorch项目中了. 因此,源码编译pytorch或caffe2,都需要 https://github.com/pytorch/pytorch 下载代码. 由于p ...

  6. Spark2.0.0内存管理

    来源:http://spark.apache.org/docs/2.0.0/configuration.html spark中的内存使用主要分为两类:执行和存储.执行内存指的是用于shuffles.j ...

  7. SpringBoot的自动配置

    1.根据条件来装配bean,SpringBoot的自动配置,根据条件进行自动配置. 首先创建一个接口,如下所示: package com.bie.encoding; /** * * @Descript ...

  8. [转] JS中的call()方法和apply()方法用法总结

    //例1 <script> window.color = 'red'; document.color = 'yellow'; var s1 = {color: 'blue' }; func ...

  9. .NET Core on K8S快速入门课程学习笔记

    课程链接:http://video.jessetalk.cn/course/explore 良心课程,大家一起来学习哈! 目录 01-介绍K8s是什么 02-为什么要学习k8s 03-如何学习k8s ...

  10. win10家庭版升级为专业版（win10专业版激活方法）

    替换专业版密钥 1.在win10家庭版桌面上鼠标右键点击[此电脑]-[属性],点击右下角的[更改产品密钥] 2.也可以点击开始-设置-更新和安全-激活-[更改产品密钥] 3.输入要升级的win10版本 ...