1.<img>标签路径:和html代码文件在同级目录下
代码:
图片标签:img,发现它有两个属性,我们先不管第二个,第一个src是我们加载的图片的路径,如果你将图片存放在和你创建的html代码文件一个目录下,那么路径就有下面几个:
首先说一下,将你要展现加载的图片放在和html代码文件一个目录下:
当我们下载完vscode以后,会在界面上出现一个“添加文件夹”的选择,创建这个文件夹,可以将你后面写的html代码文件都放在这个文件夹里,这样不会觉得乱,你可以选择在你电脑的一个地方创建这个文件夹,建议是放在vscode下载的文件夹下,这样会好找一点,创建完这个文件夹以后,你后面写的html代码文件都会保存在这个文件夹下,
这样你创建以后,当你在vscode这个文件下创建html代码文件时,这个文件会映射到你电脑上创建的这个code文件夹下,所以你放图片时直接放在你电脑上这个文件夹下,这张图片就会在vscode里面这个code文件夹下显示,看下图:
解释一下,上面那个文件夹名code和这里的HTML项目文件夹名,是一个意思,只是名字被我改了而已,都是存放html代码文件的地方
这个时候,当我们成功导入图片在和html代码文件一个文件夹(同级目录)时,我们就可以按照下面的方式写img标签的路径:
结果:
下面解释一下:绝对路径和相对路径
2.和html文件不在同级目录下(第一种情况)
我们在html代码文件所在的HTML项目文件夹下新建一个文件夹(img文件夹),再将图片放到这个文件夹下,这时候html代码文件和这个img文件夹是在同级目录下,但是这个图片(躺平)和html就长辈和晚辈的关系了,这个时候路径又会发生什么变化呢,看下面:
代码演示:
结果:
<img src="img/躺平.jpg">:含义是在此目录(指的是HTML项目)下的img下的躺平.jpg
3.和html文件不在同级目录下(第二种情况)
html代码问价(img.html)和躺平.jpg在html项目文件夹下面两个不同的文件夹下,这个时候路径又是什么,看下面:
代码演示:
结果:<img src="../img/躺平.jpg">:含义是返回上级目录下的img文件夹下的躺平.jpg
"../"代表:返回上级目录,因为img.html在HTML项目文件夹下的code文件夹下,而躺平.jpg图片在HTML项目文件夹下的img文件夹下,所以相对于img.html来讲,就是要先返回上一级目录也就是HTML目录,然后在该目录下的img文件下的躺平.jpg图片
4.img图片标签的属性
代码演示:
也可以像下面这样写:结果:
img标签的属性介绍:src就是图片地址,alt是如果图片没有成功加载,就会显示等于号后面这句话;title是等你将鼠标放在图片上就会显示的文字,width和hight是设置图片的宽和高,只设置其中一个时,图片会按比例保持原来图片的比例大小来变动另一边的长度