1.0.4 • Published 4 years ago
@icedesign/img v1.0.4
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 的间隙：
这是由于图片的 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 去掉这个功能。