@icedesign/img

ICE 图片组件。

Usage no npm install needed!

<script type="module">
  import icedesignImg from 'https://cdn.skypack.dev/@icedesign/img';
</script>

README


title: Img category: Components chinese: 图片组件

ICE 图片组件,用来增强图片显示效果。

安装和升级

npm i @icedesign/img -S

参数(props)

参数名 说明 必填 类型 默认值 可选值 备注
type 图片显示模式 false string cover cover、contain
src 图片 url true string
shape 形状展现 false string sharp circle、sharp、rounded
title 图片的 title,hover 上去会显示出来 false string ''
alt 图片的 alt 通常用于屏幕阅读器(盲人)识别 false string ''
className 图片的 className false string ''
style 图片的 inline style false object {}
width 图片显示宽度 false number 计算图片必需,不传则表现形式等同于普通 img 标签。
height 图片显示高度 false number 计算图片必需,不传则表现形式等同于普通 img 标签。
errorImgSrc 图片加载失败的兜底图片 false string 如果图片加载失败,那么将用这张图来代替
onError 图片加载失败的回调方法 false function 如果图片加载失败,那么将执行这个 callback 让你添加一些容错逻辑
enableAliCDNSuffix 是否启用 Ali CDN 自动裁切参数 false false 如果在 cover 模式下,图片高度太高可能会拉伸的比较模糊

图片底部存在 3px 空隙的解决方法

如果你将当前组件用来展示图片放在其他组件内,或者使用当前组件时有外边线,细致的你会发现底部可能存在 3px 的间隙:

image

这是由于图片的 inline-block 渲染模式导致的,你无需理解背后的原理,如果你想去掉这个间隙,可以直接在当前组件加上一行 CSS 即可:

<Img
  style={{
    verticalAlign: 'middle',
  }}
  src="xxx"
/>

图片尺寸性能优化

图片原图可能会非常大,例如 https://img.alicdn.com/tps/TB1qfWuMVXXXXcEXpXXXXXXXXXX-434-254.png 会达到 200kb 但实际放在页面上,希望它只显示 200x100 这样的尺寸,此时性能就会很差。

如果你的图片使用 img.alicdn.com 这个 CDN 地址,那么可以传入 props enableAliCDNSuffix={true} 将自动开启 Ali CDN 裁切参数,会将图片 url 变成 https://img.alicdn.com/tps/TB1qfWuMVXXXXcEXpXXXXXXXXXX-434-254.png_400x200q90.jpg 进行压缩优化,压缩之后图片只有 116kb,加载性能会提升非常多,建议默认开启使用。

如果在 cover 模式下,如果图片尺寸跟配置的显示尺寸差距太大,可能会导致拉伸变模糊,如果绝大部分图片都是此类尺寸,可以设置 false 去掉这个功能。