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

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

image.png


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


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

image.png

<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>


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

image.png

<xy-img src="https://images.xxx.jpg"></xy-img>


可以设置backgroundcolor来定制占位符

image.png

<style>
.img-placeholder{
    background:#333;
    color:#f1f1f1;
}
</style>
<xy-img src="https://images.xxx.jpg" class="img-placeholder"></xy-img>



默认链接defaultsrc


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

image.png

<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仍加载失败时(当然这种情况很少见,而且可控),会默认显示一个占位符

image.png

<xy-img src="https://images.xxx.jpg" defaultsrc="https://images.xxx.jpg"></xy-img>


描述alt


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

image.png

<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

image.png

<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(默认)、fillcontain

image.png

<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让图片在可见范围时才加载,在此之前不会发送网络请求,提升用户体验。

image.png

<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会出现标识,点击放大展示原图大小,支持键盘操作。


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

image.png

image.png

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

image.png



相关文章
|
缓存 计算机视觉 数据格式
成功解决cv2.imwrite(filename, img)代码输出中文文件乱码的问题(cv2.imencode方法解决
成功解决cv2.imwrite(filename, img)代码输出中文文件乱码的问题(cv2.imencode方法解决)
成功解决cv2.imwrite(filename, img)代码输出中文文件乱码的问题(cv2.imencode方法解决
|
5月前
|
JavaScript
Base64如何切割后面的内容,如何提取data:image/png;base64,之后的内容,Vue中.split中截取的数组如何使用数组进行获取
Base64如何切割后面的内容,如何提取data:image/png;base64,之后的内容,Vue中.split中截取的数组如何使用数组进行获取
|
7月前
|
Python
image.save()方式支持的图片格式
python保存图片格式
244 0
|
前端开发 算法 测试技术
canvas还能这么用?🤨 图片压缩70% | base64转换原理
canvas还能这么用?🤨 图片压缩70% | base64转换原理
1122 0
canvas还能这么用?🤨 图片压缩70% | base64转换原理
|
前端开发
react 判断标签img 图片是否存在,不存在则替换为默认图片
react 判断标签img 图片是否存在,不存在则替换为默认图片
829 0
|
Web App开发 XML 人工智能
如何利用Chrome浏览器将 SVG 转成 PNG
怎么把 SVG 转成 PNG ?用 Chrome 吧,非常好用,还能设定自己想要的尺寸。
418 0
如何利用Chrome浏览器将 SVG 转成 PNG
|
数据采集 前端开发 JavaScript
|
Dart 开发者
【Flutter】Image 组件 ( 内存加载 Placeholder | transparent_image 透明图像插件 )
【Flutter】Image 组件 ( 内存加载 Placeholder | transparent_image 透明图像插件 )
334 0
【Flutter】Image 组件 ( 内存加载 Placeholder | transparent_image 透明图像插件 )
|
存储 JavaScript 前端开发
Image图片查找不存在时(九)
在实际的开发中,常常会遇到关于图片的问题。 如图片显示的问题,然而在显示图片的过程中,常常也会遇到一些问题,如图片不存在,图片引用的路径不匹配等。
325 0