# 图像标签 图片是互联网的重要组成部分,让网页变得丰富多彩。本章介绍如何在网页插入图片。 ## `` ``标签用于插入图片。它是单独使用的,没有闭合标签。 ```html ``` 上面代码在网页插入一张图片`foo.jpg`。`src`属性指定图片的网址,上例是相对 URL,表示图片与网页在同一个目录。 ``默认是一个行内元素,与前后的文字处在同一行。 ```html
HelloWorld
``` 上面代码的渲染结果是,文字和图片在同一行显示。 图像默认以原始大小显示。如果图片很大,又与文字处在同一行,那么图片将把当前行的行高撑高,并且图片的底边与文字的底边在同一条水平线上。 ``可以放在``标签内部,使得图片变成一个可以点击的链接。 ```html ``` 上面代码中,图片可以像链接那样点击,点击后会产生跳转。 **(1)alt 属性** `alt`属性用来设定图片的文字说明。图片不显示时(比如下载失败,或用户关闭图片加载),图片的位置上会显示该文本。 ```html ``` 上面代码中,`alt`是图片的说明。图片下载失败时,浏览器会在图片位置,显示文字“示例图片”。 **(2)width 属性,height 属性** 图片默认以原始大小插入网页,`width`属性和`height`属性可以指定图片显示时的宽度和高度,单位是像素或百分比。 ```html ``` 上面代码中,`width`属性指定图片显示的宽度为400像素,`height`属性指定显示高度为300像素。 注意,一旦设置了这两个属性,浏览器会在网页中预先留出这个大小的空间,不管图片有没有加载成功。不过,由于图片的显示大小可以用 CSS 设置,所以不建议使用这两个属性。 一种特殊情况是,`width`属性和`height`属性只设置了一个,另一个没有设置。这时,浏览器会根据图片的原始大小,自动设置对应比例的图片宽度或高度。举例来说,图片大小是 800像素 x 800像素,`width`属性设置成200,那么浏览器会自动将`height`设成200。 **(3)srcset,sizes** 详见下文的《响应式图像》部分。 **(4)referrerpolicy** ``导致的图片加载的 HTTP 请求,默认会带有`Referer`的头信息。`referrerpolicy`属性对这个行为进行设置。 **(5)crossorigin** 有时,图片和网页属于不同的网站,网页加载图片就会导致跨域请求,对方服务器可能要求跨域认证。`crossorigin`属性用来告诉浏览器,是否采用跨域的形式下载图片,默认是不采用。 简单说,只要打开了这个属性,HTTP 请求的头信息里面,就会加入`origin`字段,给出请求发出的域名,不打开这个属性就不加。 一旦打开该属性,它可以设为两个值。 - `anonymous`:跨域请求不带有用户凭证(通常是 Cookie)。 - `use-credentials`:跨域请求带有用户凭证。 下面是一个例子。 ```html ``` `crossorigin`属性如果省略值的部分,则等同于`anonymous`。 ```html ``` **(6)loading** 浏览器的默认行为是,只要解析到``标签,就开始加载图片。对于很长的网页,这样做很浪费带宽,因为用户不一定会往下滚动,一直看到网页结束。用户很可能是点开网页,看了一会就关掉了,那些不在视口的图片加载的流量,就都浪费了。 `loading`属性改变了这个行为,可以指定图片的懒加载,即图片默认不加载,只有即将滚动进入视口,变成用户可见时才会加载,这样就节省了带宽。 `loading`属性可以取以下三个值。 > - `auto`:浏览器默认行为,等同于不使用`loading`属性。 > - `lazy`:启用懒加载。 > - `eager`:立即加载资源,无论它在页面上的哪个位置。 ```html ``` 由于行内图片的懒加载,可能会导致页面布局重排,所以使用这个属性的时候,最好指定图片的高和宽。 ## `