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

来源：互联网 2023-03-16 19:10:56 216

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

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

方法/步骤

例如：img src="img1.png" />

双引号下直接是文件名，这是找当前文件（3-图片标签.html）所在目录(图片标签)下的img1.png

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

当img1.png在图片标签目录在，那么就可以防问到。点击可以预览到图片效果。

另外img src="./img1.png" />和img src="img1.png" />是一样的，但是当前路径。

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

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

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

如果想访问到这张图片，可以使用src="../img1.png" />

../ 就是代表上层目录。图片标签目录的上层目录就是——html标签目录。

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

我们将图片再往外挪到web01-html目录下。

这时候并不是加一个点可以访问到（并不是 .../），

而是再加一个上层目录,具体几个上层目录，主要看参照物是当前文件（3-图片标签.html）所在目录——图片标签

src="../../img1.png">

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

接下来我们把图片放到web01-html目录下的img目录。

注意参照物是图片标签（也就该html文件所在的目录）,相对路径就是相对这个目录的。

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

../../ 就是web01-html目录，

../../img/img1.png 就是目标图片文件了。

所以要访问img目录下的图片，使用：

img src="../../img/img1.png">/img>

如下图就可以访问到了。

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

7相关内容未经许可获取自百度经验

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： HTML