# Image 图片
用于图片加载，显示时包含淡入动画。
# 用法
# 基础用法
<sui-image
src="https://tiem-cdn.qq.com/sy/wmsj/ingame/images/background.jpg"
></sui-image>
1
2
3
2
3
效果示例：
# 属性
# src
- 类型：
String - 用法：
<sui-image
src="https://tiem-cdn.qq.com/sy/wmsj/ingame/images/background.jpg"
></sui-image>
1
2
3
2
3
图片 URL，效果示例：
# lazy 0.17.5+
- 类型：
Boolean - 默认值：
false - 用法：
<sui-image
lazy
src="https://tiem-cdn.qq.com/sy/wmsj/ingame/images/background.jpg"
></sui-image>
1
2
3
4
2
3
4
是否启用懒加载功能：进入可视区域后再加载图片，使用 Intersection Observer API ，浏览器兼容请查阅 Can I Use，低版本浏览器内核无效
# background-color 0.14.0+
- 类型：
String - 默认值：
'rgba(0, 0, 0, 0.06)' - 用法：
<sui-image
src="https://tiem-cdn.qq.com/sy/wmsj/ingame/images/background.jpg"
background-color="rgba(0, 0, 0, 0.5)"
></sui-image>
1
2
3
4
2
3
4
图片加载完成之前的占位背景色，支持所有合法的 background-color 值，效果示例：
# background-size 0.14.0+
- 类型：
String - 默认值：
'cover' - 用法：
<sui-image
src="https://tiem-cdn.qq.com/sy/wmsj/ingame/images/background.jpg"
background-color="rgba(0, 0, 0, 0.5)"
background-size="contain"
></sui-image>
1
2
3
4
5
2
3
4
5
图片的显示方式，支持所有合法的 background-size 值，效果示例：
# loading 0.14.0+
- 类型：
Boolean - 默认值：
false - 用法：
<sui-image
loading
src="https://tiem-cdn.qq.com/sy/wmsj/ingame/images/background.jpg"
></sui-image>
1
2
3
4
2
3
4
是否显示加载动画，效果示例：