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 去掉这个功能。