html的使用src无法正常显示图片或者视频等的原因
如下,这是我网页文件存放的位置,大家能看到我的图片是跟网页存放在同一个根目录下那么再看看代码,实现效果图。
代码区域
<img src="2.jpg" height="250" width="250"/>
<img src="2-2.jpg"/>
<img src="2-3.jpg"/>
效果图
请仔细观察下代码和图,再对比下下面的图
代码区域
<img src="img/2.jpg" height="250" width="250"/>
<img src="img/2-2.jpg"/>
<img src="img/2-3.jpg"/>
效果图
通过对比上面是否有发现什么不同之处,没错,是存放位置变化了,那么为什么图片移动没有让图片无法显示出来?原因是因为我改了代码区域的src属性的属性值:路径
路径有两种:绝对路径、相对路径
绝对文件路径
绝对文件路径是指向一个因特网文件的完整 URL:
实例
<img src="https://www.w3school.com.cn/images/picture.jpg" alt="flower">
相对路径
相对路径指向了相对于当前页面的文件。
在本例中,文件路径指向了位于当前网站根目录中 images 文件夹里的一个文件:
实例
<img src="/images/picture.jpg" alt="flower">
在本例中,文件路径指向了位于当前文件夹中 images 文件夹里的一个文件:
实例
<img src="images/picture.jpg" alt="flower">
在本例中,文件路径指向了位于当前文件夹的上一级文件夹中 images 文件夹里的一个文件:
实例
<img src="../images/picture.jpg" alt="flower">
好习惯
使用相对路径是个好习惯(如果可能)。
如果使用了相对路径,那么您的网页就不会与当前的基准 URL 进行绑定。所有链接在您的电脑上 (localhost) 或未来的公共域中均可正常工作。