网站引入图片的几种路径方法
一、首先我们要知道:
“./”:表示当前目录(也叫工作目录)
”../”:表示级及目录
”/”:表示根目录
二、网上的url
选中自己想要的图片,右键“复制图像地址”,然后粘贴在<img>标签的src路径下。
三、本地的绝对路径
绝对路径是相对于磁盘的位置去定位文件的地址,即图片文件与html文件不在同一个地址下:
如果图片的路径在E:/A文件夹/B文件夹/C文件夹/1.jpg
html文件的路径也在D:/F文件夹/G文件夹/new1.html
则需要在在<img>标签的src路径下填写绝对路径。
1、如果访问本地的绝对路径下的图片,应该使用file协议,而不是http协议
则文件路径可以这样写<img src=“file:///E:/A文件夹/B文件夹/C文件夹/1.jpg” style=“width: 500px;”>
也可以直接只写个根目录标记“/”<img src=“/E:/A文件夹/B文件夹/C文件夹/1.jpg” style=“width: 500px;”>
2、web服务器上的网络资源地址定位是相对于网站根目录的。
四、本地的相对路径
绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件,相对路径就没有这个问题。
1、即在同一个地址下:
如果图片的路径在D:/A文件夹/B文件夹/1.jpg
html文件的路径也在D:/A文件夹/B文件夹/new1.html
则直接在<img>标签的src路径下填写1.jpg 代码如下:
<img src=“1.jpg” style=“width: 500px;”>
在同一个目录下也可以用”./”表示,即代码也可以这样写
<img src=“./1.jpg” style=“width: 500px;”>
2、虽然不在同一个地址,但在其上级目录,则可以用“../”表示
表示当前文件所在的目录的上一级目录。
如果图片的路径在D:/A文件夹/1.jpg,而html文件在
D:/A文件夹/B文件夹/1.jpg 则直接在<img>标签的src路径
为../1.jpg,即:<img src=“../1.jpg” style=“width: 500px;”>
3、如在其父目录的某一文件夹下,其文件夹为image,则
应这样写src的相对路径<img src=“../image/1.jpg” style=“width: 500px;”>
4、如图片文件在其子目录下,其文件夹同样是image,则
应这样写src的相对路径<img src=“image/1.jpg” style=“width: 500px;”>