简单实用的原生img替换方案：xy-img

原生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~。