如何理解和使用html中img标签src的相对路径？

2024-11-10 00:47:50

如何理解和使用html中的img标签（图片标签）中src属性的相对路径？既然是相对，你就要注意是相对哪一个，也就是知道参照物。

操作方法

01

例如：<img src="img1.png" /> 双引号下直接是文件名，这是找当前文件（3-图片标签.html）所在目录(图片标签)下的img1.png
02

当img1.png在图片标签目录在，那么就可以防问到。点击可以预览到图片效果。另外<img src="./img1.png" />和<img src="img1.png" />是一样的，但是当前路径。
03

如下图，当我们把img1.png移动到图片标签的上层目录 html标签时。这时<img src="img1.png" /> 路径不对。无法显示图片。
04

如果想访问到这张图片，可以使用<src="../img1.png" /> ../ 就是代表上层目录。图片标签目录的上层目录就是—— html标签目录。
05

我们将图片再往外挪到web01-html目录下。这时候并不是加一个点可以访问到（并不是 .../），而是再加一个上层目录,具体几个上层目录，主要看参照物是当前文件（3-图片标签.html）所在目录—— 图片标签 <src="../../img1.png">
06

接下来我们把图片放到web01-html目录下的img目录。注意参照物是图片标签（也就该html文件所在的目录）,相对路径就是相对这个目录的。
07

../../ 就是web01-html目录， ../../img/img1.png 就是目标图片文件了。所以要访问img目录下的图片，使用： <img src="../../img/img1.png"></img> 如下图就可以访问到了。

赞 (0)

如何在Word2010文档中设置标签选项(图文教程)

在Word2010文档中，每个标签包含了多个不同收件人的信函邮件地址。用户可以设置标签选项，以选择标签类型。具体操作步骤如下所述：第1步，打开Word2010文档窗口，切换到“邮件”功能区。在“开始 ...
在Word2010文档中设置标签选项

在Word2010文档中，每个标签包含了多个不同收件人的信函邮件地址。用户可以设置标签选项，以选择标签类型。具体操作步骤如下所述：第1步，打开Word2010文档窗口，切换到“邮件”功能区。在“开始 ...
win7电脑任务栏中同类标签如何拆分?

就如小编下图中所示的情况一样,一样的txt标签,win7系统自带的超级任务栏功能会将它归为一类,重叠到一起,这样不仅可以节约空间,也能让喜欢多开网页的朋友不再受到任务栏中"密集标签" ...
excel中sheet标签的颜色怎么设置?

excel中一般都有三个sheet,颜色一般都是无颜色的状态,那excel怎样设置sheet标签的颜色?我们来学习一下. 步骤打开电脑桌面,右键-新建一个空白工作表. 打开空白工作表后,发现左下角有 ...
excel中利用标签制作三栏表头的方法

在工作中制作表格是我们经常要进行的活动,尤其是制作表格表头,有些时候需要制作三栏表头或者更多栏表头,那么如何制作呢?下面小编将为大家带来excel中利用标签制作三栏表头的方法.感兴趣的朋友一起去看看吧 ...
如何在支付宝账单中设置标签？

相信很多小伙伴都有在使用支付宝,如果我们想要在其中的账单中设置标签该怎么做呢?方法很简单,下面小编就来为大家介绍.具体如下:1. 首先,打开手机上的"支付宝".进入首页后,点击右下 ...
如何开启手机uc浏览器中的标签自动云同步功能

当我们在使用手机的时候,可以通过UC浏览器来浏览网页,那么在手机UC浏览器中,如何设置标签自动云同步呢?接下来就由小编来告诉大家.具体如下:1. 第一步,打开手机并在桌面找到UC浏览器图标,点击进入. ...
手机微信中的标签如何删除？

手机微信从诞生开始就一直在不断更新完善自己的功能,今天教程就来带大家看看如何删除我们曾经给好友标注的标签.具体如下:1. 第一步,我们需要点击打开手机微信,接着在如图所示的界面中,需要点击切换到&qu ...
如何在微博中添加标签

有的小伙伴在发微博图片时,想要添加标签,但是却不知道如何添加,其实我们可以添加地点标签.话题标签.@好友标签和商品标签,具体操作,小编就来为大家介绍一下吧.微博添加标签的方法和步骤:1. 第一步,点击 ...