说明
Image为图片组件,常用于在应用中显示图片。
支持png、jpg、jpeg、bmp、svg、webp、gif和heif类型的图片格式。
相当于
<img>标签
数据源
支持加载以下类型的数据源:
- PixelMap
- ResourceStr
- DrawableDescriptor
理解
这里的数据源相当于 <img> 标签的 src 属性
src 属性是 字符串 类型,表示 图片的路径
接口
Image加载成功且组件不设置宽高时,其显示大小自适应父组件
Image组件默认按照居中裁剪,例如组件宽高设置相同,原图长宽不等,此时按照中间区域进行裁剪。
Image(src: PixelMap | ResourceStr | DrawableDescriptor)
参数:
src:这里只介绍下面类型:
ResourceStr类型中的Resource类型,管理需全局使用的图片资源,跨包/跨模块访问资源文件,是访问本地图片的 推荐方式string类型,可用于加载 网络图片 和 本地图片,常用于加载网络图片。当使用相对路径引用本地图片时,例如Image("common/test.jpg")
Resource 类型
方式一
图片资源放在 src/main/resources/base/media 文件夹中
如:src/main/resources/base/media/1.jpg
加载图片:
Image($r("app.media.1"))
注意:不需要图片后缀名
方式二
图片资源放在 src/main/resources/rawfile 文件夹中
如:src/main/resources/rawfile/1.jpg
加载图片:
Image($rawfile("1.jpg"))
方式三
网络图片
Image("https://wx2.sinaimg.cn/mw690/005to85Yly1hislbd5s9yj35k63pge87.jpg")
参考:
https://blog.csdn.net/weixin_63448554/article/details/135172804