HTML——img标签路径问题

应该在敲牛腩的时候,就遇到了这个问题,今天总结一下,以免遗忘

img标签有两种路径文件,绝对路径就不多说了,是从电脑的根目录开始,重点说下

相对路径分为三种

  • 同级
  • 向上
  • 向下

这三个位置是相对于index.html(当前写的页面)来说的,如下图

开始展开

同级:

从图中可以看出,与index.html同级的为:“这事儿不能怪我.jpg",即

在html中的代码为:

<img src="./这事儿不能怪我.jpg" alt="">

或者

<img src="这事儿不能怪我.jpg" alt="">

向上:

挪动下index.html文件的位置

此时这个图片便在index.html文件的上一级

在html中的代码为:

<img src="../这事儿不能怪我.jpg" alt="">

向下:

挪动图片的地址

此时这个图片便在index.html文件的下一级

在html中的代码为:

<img src="img/这事儿不能怪我.jpg" alt="">

或者为:

<img src="./img/这事儿不能怪我.jpg" alt="">

最后展示一个效果图吧,哈哈

总结:

对于img中路径文件的符号有两个

./表示与编写文件的html文件同级

../表示在编写文件的html文件上一级

发布了156 篇原创文章 · 获赞 49 · 访问量 5万+

猜你喜欢

转载自blog.csdn.net/shang_0122/article/details/103011555
今日推荐