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

 时间:2024-10-15 01:18:52

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

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

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

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

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

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

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

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

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

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

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

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

7、../../ 就是web01-html目录,../../img/img1.png 就是目标图片文件了。所以要访问img目录下的图片,使用:<稆糨孝汶;img src="../../img/img1.png"></img>如下图就可以访问到了。

如何理解和使用html中img标签src的相对路径
  • html页面如何创建多选框
  • webstorm怎么替换
  • css如何制作搜索图标
  • 如何在js里设置元素为浮动属性
  • jquery获取对象属性值的方法?
  • 热门搜索
    关于劳动的手抄报 手抄报大全简单又漂亮 艾滋病手抄报 梦想手抄报 妇女节手抄报 手抄报大全 节约粮食手抄报简单又漂亮 国庆手抄报 清明节手抄报好看简单字少 劳动手抄报内容文字