资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/简单实用的原生img替换方案：xy-img

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

Cciradih / 1763人阅读

摘要：引入使用链接图片链接。比例可以设置一个比例来约束图片的尺寸以宽度为基准。小结上面简单介绍了的使用，是一个原生组件，不限制于框架，可直接使用。

原生img的痛点

最近，xy-ui新增了一类组件xy-img，主要目的是为了代替原生img标签，解决了原生img在使用时通常会用一些问题

加载失败的默认显示

无法直接设置图片比例

无法懒加载（最新chrome可能支持，不完善）

无法点击查看大图

下面来看实际使用：

建议查看原文，可以实时交互

使用方式

使用方式很简单

npm i xy-ui

或者直接从github拷贝源码。
链接src

图片链接。可以是绝对路径，也可以是相对路径。

当图片链接加载失败时，会默认显示一个占位符

可以设置background和color来定制占位符
默认链接defaultsrc

默认链接。如果不能保证src一定能加载成功（一般是外部链接），可以设置一个defaultsrc来处理当src加载失败时的情况。

当defaultsrc仍加载失败时（当然这种情况很少见，而且可控），会默认显示一个占位符

描述alt

可以设置一个描述，加载成功时会显示在左下方，加载失败时会显示在占位符上。
比例ratio

可以设置一个比例来约束图片的尺寸（以宽度为基准）。

格式为w/h，如16/9。

自适应fit

设置自适应方式，同原生object-fit，可取值cover（默认）、fill、contain。

懒加载lazy

可以设置lazy让图片在可见范围时才加载，在此之前不会发送网络请求，提升用户体验。

画廊gallery

可以设置gallery属性，得到一个画廊效果，此时鼠标hover会出现标识，点击放大展示原图大小，支持键盘操作。

加载失败的图片不会计入。

可以根据gallery属性值自动分类成不同组别。
小结

上面简单介绍了xy-img的使用，xy-img是一个原生web组件，不限制于框架，可直接使用。如果想使用其他类似的组件，可关注xy-ui，汇集了其他各类常见交互组件，欢迎star~。

GPU云服务器 云服务器 ubbcode简单实用 linux简单实用 获取img的src js 获取img的图片数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105899.html

相关文章

  • 《CSS世界》中提到的实用技巧

    摘要：一部分没录入的技巧原因是部分属性将被标准废弃，如。正确的滚动底部留白方式如果使用留白，在和不会显示。正方观点观点观点反方观点观点正确的块级元素右对齐值对于来讲是占用剩余的空间。 以下技巧的具体原理和解释请支持张老师的《CSS世界》，在这里不做展开。 一部分没录入的技巧原因是部分属性将被标准废弃，如：clip。还有一部分是因为个人觉得兼容性不好，而且CSS3的一些特性可以弥补，比如tex...

    oliverhuang 评论0 收藏0

  • 【JS实用技巧】优化动态创建元素的方式，让代码更加优雅且利于维护

    摘要：更好的方案模板分离原则模板分离原则将定义模板的那一部分，与的代码逻辑分离开来，让代码更加优雅且利于维护。 showImg(https://segmentfault.com/img/bVJ73t?w=800&h=316); 引言 在前端开发中，经常需要动态添加一些元素到页面上。那么如何通过一些技巧，优化动态创建页面元素的方式，使得代码更加优雅，并且更易于维护呢？接下来我们通过研究一些实例...

    JeOam 评论0 收藏0

  • 【JS实用技巧】优化动态创建元素的方式，让代码更加优雅且利于维护

    摘要：更好的方案模板分离原则模板分离原则将定义模板的那一部分，与的代码逻辑分离开来，让代码更加优雅且利于维护。 showImg(https://segmentfault.com/img/bVJ73t?w=800&h=316); 引言 在前端开发中，经常需要动态添加一些元素到页面上。那么如何通过一些技巧，优化动态创建页面元素的方式，使得代码更加优雅，并且更易于维护呢？接下来我们通过研究一些实例...

    hqman 评论0 收藏0

  • 移动web开发问题和经验总结

    摘要：的事件默认绑在上的抓包浏览器连接安卓机测试实用网站适配测试兼容性网站前端开发雅虎条优化准则 前言 这里大部分是自己遇到过的情况，还有一部分借鉴了同行的文章，如果大家有遇到其它坑，欢迎提出来一起研究。 知识要点 1. Meta标签 1.禁止用户缩放页面，页面强制让文档的宽度与设备的宽度保持1:1 2.禁止ios上自动识别电话 3.禁止android上自动识别邮箱 4.针对ios上的...

    MorePainMoreGain 评论0 收藏0

  • 移动web开发问题和经验总结

    摘要：的事件默认绑在上的抓包浏览器连接安卓机测试实用网站适配测试兼容性网站前端开发雅虎条优化准则 前言 这里大部分是自己遇到过的情况，还有一部分借鉴了同行的文章，如果大家有遇到其它坑，欢迎提出来一起研究。 知识要点 1. Meta标签 1.禁止用户缩放页面，页面强制让文档的宽度与设备的宽度保持1:1 2.禁止ios上自动识别电话 3.禁止android上自动识别邮箱 4.针对ios上的...

    yexiaobai 评论0 收藏0

发表评论

登陆后可评论

0条评论

Cciradih

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<