原生img的痛点
最近，xy-ui新增了一类组件xy-img，主要目的是为了代替原生img标签，解决了原生img在使用时通常会用一些问题
- 加载失败的默认显示
- 无法直接设置图片比例
- 无法懒加载（最新chrome可能支持，不完善）
- 无法点击查看大图
下面来看实际使用：
建议查看原文，可以实时交互
使用方式
使用方式很简单
npm i xy-ui
或者直接从github拷贝源码。
<!-- 引入 --> <script type="module"> import './node_modules/xy-ui/components/xy-img.js'; </script> <!-- 使用 --> <xy-img src="img.jpg"></xy-img>
链接src
图片链接。可以是绝对路径，也可以是相对路径。
<xy-img src="https://images.pexels.com/photos/841228/pexels-photo-841228.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></xy-img>
当图片链接加载失败时，会默认显示一个占位符
<xy-img src="https://images.xxx.jpg"></xy-img>
可以设置background和color来定制占位符
<style> .img-placeholder{ background:#333; color:#f1f1f1; } </style> <xy-img src="https://images.xxx.jpg" class="img-placeholder"></xy-img>
默认链接defaultsrc
默认链接。如果不能保证src一定能加载成功（一般是外部链接），可以设置一个defaultsrc来处理当src加载失败时的情况。
<xy-img src="https://images.xxx.jpg" defaultsrc="https://images.pexels.com/photos/697662/pexels-photo-697662.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></xy-img>
当defaultsrc仍加载失败时（当然这种情况很少见，而且可控），会默认显示一个占位符
<xy-img src="https://images.xxx.jpg" defaultsrc="https://images.xxx.jpg"></xy-img>
描述alt
可以设置一个描述，加载成功时会显示在左下方，加载失败时会显示在占位符上。
<xy-img src="https://images.pexels.com/photos/841228/pexels-photo-841228.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="image-keyboard"></xy-img> <xy-img src="https://images.xxx.jpg" alt="image-keyboard"></xy-img>
比例ratio
可以设置一个比例来约束图片的尺寸（以宽度为基准）。
格式为w/h，如16/9。
<xy-img ratio="16/9" src="https://images.pexels.com/photos/841228/pexels-photo-841228.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></xy-img>
自适应fit
设置自适应方式，同原生object-fit，可取值cover（默认）、fill、contain。
<xy-img fit="cover" src="https://images.pexels.com/photos/841228/pexels-photo-841228.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></xy-img>
懒加载lazy
可以设置lazy让图片在可见范围时才加载，在此之前不会发送网络请求，提升用户体验。
<xy-img lazy src="https://images.pexels.com/photos/841228/pexels-photo-841228.jpeg?auto=compress&cs=tinysrgb&dpr=1&h=650&w=940"></xy-img>
画廊gallery
可以设置gallery属性，得到一个画廊效果，此时鼠标hover会出现标识，点击放大展示原图大小，支持键盘操作。
加载失败的图片不会计入。
<xy-img gallery src="https://images.pexels.com/photos/841228/pexels-photo-841228.jpeg?auto=compress&cs=tinysrgb&dpr=1&h=650&w=940"></xy-img>
可以根据gallery属性值自动分类成不同组别。
<xy-img gallery="A" src="https://images.pexels.com/photos/698808/pexels-photo-698808.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></xy-img> <xy-img gallery="B" src="https://images.pexels.com/photos/1440387/pexels-photo-1440387.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></xy-img>
小结
上面简单介绍了xy-img的使用，xy-img是一个原生web组件，不限制于框架，可直接使用。如果想使用其他类似的组件，可关注xy-ui，汇集了其他各类常见交互组件，欢迎star~。
