Web前端如何在网页中引用图像

479 阅读3分钟

在网页中添加图像,可以使页面变得更加漂亮,使你的网站更加吸引人。

1.如何在网页中添加图像

在网页中添加图像的标签很简单,它只有一个标签。前面的文章中已经提过,带有开始标签和结束标签的标记有两种用途:要么标签包装的是文本内容(例如段落标签

),要么这个标签是为了作为其他标签的容器(例如,标签)。图像标签是为了引用其他的内容(一幅图像文件),因此这个标签的开始标签和结束标签写在一起了。

2.图像标签的使用方法以及常用属性

(1)src属性:使用图像标签时,你必须带有这个属性,因为它指定了你所引用的图片的位置。Src是英文source的缩写,表示资源地址的意思(你的图片或视频本身就是资源)。例如,img src=”C:\picture\tree.jpg” /这行代码表示你插入了一幅图像,该图像的名字是tree.jpg,它位于C盘的picture文件夹下。(C:\picture\ 称为路径,tree.jpg就是在这个路径下的图像文件的名称,.jpg格式代表图像类型的文件)。

(2)alt属性:alt是单词alter的缩写,它的意思就是更换。在这里表示更换的文本。它的作用就是:当你的网速过慢或其他原因,图像不能正常显示,这时就会依alt属性所指定的文字来显示。

例如,<img src=”C:\image\duck.jpg” alt=”这里是一幅图片” /

这行代码的意思就是当C盘的iamge文件夹下的duck.jpg图像不能在网页上显示时,它会显示“这里是一幅图片”这句话。

(3)width和height属性

Width代表网页上显示的图像宽度,height属性代表图像在网页上的显示高度。默认单位为像素。例如,<img src=”图像地址” width=”300” height=”200” /表示图像在网页上显示宽度为300像素,高度为200像素。

说明:当使用<img /标签时,src是必须有的属性。Alt,width,height这三个属性可有可无。

在使用width和height属性时你需要注意:假如你的图像源文件是300X300(宽度300,高度300),当你的img标签没有指定宽度和高度属性,则图像按原图显示(300X300);如果你只指定一个属性值时(width=100),则另一个属性(heght)按等比例显示(即高度也是100);如果两者都指定时,图像有可能变形(例如,width=100,height=50)。

3.关于src属性的重要说明

Src代表了引用资源的地址,即这个资源(比如一幅图像)在哪里,叫什么名字。资源地址的表示形式就是路径\文件名。资源地址可以绝对路径或相对路径。

绝对路径:表示你所引用的文件的完整地址。例如,在你的电脑上的绝对地址就是:磁盘名\文件夹\文件名,如果你想引用某网站上的一幅图像,则绝对路径就是:网站名/文件夹名/文件名(绝对路径可以在浏览器地址栏中直接复制即可)。

相对路径:表示你引用的图片文件相对于当前你编写的这个网页的地址。可以有以下几种方式:

<img src="picture.jpg" 表示图像文件与当前网页在同一个文件夹。

<img src="images/picture.jpg" 表示当前网页与images文件夹在同一个文件夹,图像位于images文件夹中。

<img src="./picture.jpg" 表示网页所在的文件夹与引用的图片在同一个文件夹中。