原生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~。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。