纯血鸿蒙组件库AUI：图片组件

鸿蒙开发之南拳北腿

发布于 2025-4-9 19:36

3434浏览

0收藏

加载失败

调用示例一：极简调用

1.将图片组件拖拽到页面排版区
2.设置图片地址
3.保存设置
纯血鸿蒙组件库AUI：图片组件-鸿蒙开发者社区

调用示例二：更多属性

1.将图片组件拖拽到页面排版区
2.设置图片地址、宽度、高度、圆角类型、显示外框线
3.保存设置
纯血鸿蒙组件库AUI：图片组件-鸿蒙开发者社区

调用示例三：圆形图片

1.将图片组件拖拽到页面排版区
2.设置宽度，圆角设置为圆形
3.保存设置
纯血鸿蒙组件库AUI：图片组件-鸿蒙开发者社区
生成纯血鸿蒙代码：

 GridCol({ span: 4 }) {
              A_Image({
                src: 'https://cdn.aigcoder.com/sample/Image/image1.jpeg',
                imageWidth: 300,
                imageHeight: 300,
              })
            }

            GridCol({ span: 4 }) {
              A_Image({
                src: 'https://cdn.aigcoder.com/sample/Image/image4.jpeg',
                imageWidth: 240,
                imageHeight: 160,
                radius: 'radius',
                imageOutline: true
              })
            }

            GridCol({ span: 4 }) {
              A_Image({
                src: 'https://cdn.aigcoder.com/sample/Image/image2.jpeg',
                imageWidth: 120,
                imageHeight: 300,
                radius: 'circle',
              })
            }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.

以下分别为图片组件在平板、折叠屏、手机，以及在浅色模式和深色模式下的表现：
纯血鸿蒙组件库AUI：图片组件-鸿蒙开发者社区

图片组件各属性字段解释如下：
/**

【图片】
src：图片地址(支持远程图片和本地资源)
imageWidth：图片宽度
imageHeight：图片高度
radius：圆角类型(支持radius,circle,normal)
imageOutline：是否显示外框线
*/
@Component
export struct A_Image {
@Prop src: string = ‘’
@Prop imageWidth?: number
@Prop imageHeight?: number
@Prop radius?: string = ‘normal’
@Prop imageOutline?: boolean = false