展开
拓展 关闭
订阅号推广码
GitHub
视频
公告栏 关闭

图像img标签

常用属性
src
  图⽚路径
alt
  图⽚加载失败或加载时显示的⽂字
title
  悬浮在图⽚上⾯显示的⽂字

图⽚的来源
  本地图⽚:稳定
  线上图⽚:图⽚容易丢失
Base64图⽚
  优点:⼩图⽚占⽤内存⼩,不请求服务器,降低服务器资源与访问
  缺点:⼤图⽚增⼤了数据库服务器的压⼒
点击图⽚跳转
  通过嵌套a标签
  • 案例
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <a href="https://xdclass.net">
    <img src="https://file.xdclass.net/video/2021/62-paas/zt-x.jpeg" alt="vip图片" title="vip图片">
  </a>
  <img src="./smile.gif">
  <img src="./vip.jpeg">
  <img src="./xdclass_logo.png">
  <!--将图片转为base64后访问-->
  <img
  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDphNzZlZmJjZi00Mzg5LTZlNDItYjk2MS0zYWY3M2FiN2I5NmMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDYyM0YwOUFDNUNBMTFFQjgzMDlGQ0M1ODQ0NjJCQTkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDYyM0YwOTlDNUNBMTFFQjgzMDlGQ0M1ODQ0NjJCQTkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6YTc2ZWZiY2YtNDM4OS02ZTQyLWI5NjEtM2FmNzNhYjdiOTZjIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmE3NmVmYmNmLTQzODktNmU0Mi1iOTYxLTNhZjczYWI3Yjk2YyIv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">
</body>
</html>
posted @ 2022-08-29 22:45  DogLeftover  阅读(17)  评论(0编辑  收藏  举报