简单实用的原生img替换方案xyimg

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