img 标签

698 阅读1分钟

1.<img>的作用

<img>会发起一个 get 请求,请求一张图片,并展示在页面上。


2.<img>的属性

  • src :src(source),属性的值时请求的图片的路径。
  • width&height:设置图片的宽度、高度,这是标签的一个属性,而不是CSS样式。 注意:如果只设置其中一个属性,图片会响应式保持原本的宽高比例;如果同时设置两个属性,有可能图片比例会被破坏。
  • alt:替代文本。当<img>请求失败的时候该属性的值会出现在原本图片的位置。

3.的相关事件

  • onload:当<img>标签请求成功,图片成功加载后触发该事件。
  • onerror:当<img>标签请求失败,图片无法加载后触发该事件。通常用于:目标图片请求失败后,转而请求一个报错提示图片。

4.<img>的响应式

通过添加样式max-width:100%<img>请求的图片能够适应不同大小的窗口,始终填充满窗口。


5.<img>是一个可替换标签

拓展链接:空元素&可替换元素