HTML的img标签介绍

223 阅读1分钟

什么是img标签?

发起一个get请求,用于展示图片。

<img src="" alt="">

属性

alt:可选的,用于图片加载失败之后的显示

height、width:设置高度和宽度,如果只设置宽度或者高度则会自适应

src:src是source,用来接图片地址

事件:

onload、onerrer:监听图片是都加载成功,成功则加载onload,失败则加载onerrer,可以用于图片加载失败的挽救。

例:
<body>
  <img id='xxx' src="ab.png" alt="塔可夫">
  <script>
    xxx.onload=function(){
      console.log("图片加载成功")
    }
    xxx.onerror=function(){
      console.log("图片加载失败")
      xxx.src='/abc.png'
    }
  </script>
</body>

width:100%和max-width:100%区别:

img { max-width: 100%;},img { width: 100%;}

width:不管img宽度多少,都显示div宽度

max-width:100%:如果img宽度大于div宽度,img就显示div100%宽度,否则就显示img的宽度