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

作者：华哥的全栈次元舱

2025-06-03
广东
本文字数：2255 字
阅读完需：约 7 分钟

摘要：
图片组件(A_Image)：可设置图片地址、图片宽度、图片高度、圆角类型及是否显示外框线。圆角类型支持普通圆角、圆形及无圆角。

一、组件调用方式

1.极简调用

只需要输入 A_Image，然后给 src（图片地址）属性赋值即可。默认宽度和高度均为 300vp，方角。

2.更多属性

输入 A_Image，然后给 src（图片地址）属性赋值，可设置图片宽度（imageWidth）、图片高度（imageHeight）、圆角类型（radius）和使用外框线（imageOutline）。

3.圆形图片

输入 A_Image，然后给 src（图片地址）属性赋值，可设置图片宽度（imageWidth），将圆角类型 radius 设置为 circle（圆形）。如下图所示：

页面调用代码如下：

 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.极简调用

1.1、将图片组件拖拽到页面排版区

1.2、设置图片地址

1.3、保存设置

2.更多属性

2.1、将图片组件拖拽到页面排版区

2.2、设置图片地址、宽度、高度、圆角类型、显示外框线

2.3、保存设置

3.圆形图片

3.1、将图片组件拖拽到页面排版区

3.2、设置宽度，圆角设置为圆形

3.3、保存设置

生成纯血鸿蒙代码：

三、组件源码

图片组件的完整源码如下：

/* * Copyright (c) 2024 AIGCoder.com(AI极客) * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * *     http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */
/** 调用示例一：极简调用 A_Image({  src: 'https://cdn.aigcoder.com/sample/Image/image1.jpeg' })
 调用示例二：更多属性 A_Image({   src: 'https://cdn.aigcoder.com/sample/Image/image4.jpeg',   imageWidth: 300,   imageHeight: 200,   radius: 'radius',   imageOutline: true }) */
import { ColorConstants } from "../../constants/ColorConstants"import { FloatConstants } from "../../constants/FloatConstants"import { GirdConstants } from "../../constants/GirdConstants"
/** * 【图片】 * src：图片地址(支持远程图片和本地资源) * imageWidth：图片宽度 * imageHeight：图片高度 * radius：圆角类型(支持radius,circle,normal) * imageOutline：是否显示外框线 */@Componentexport struct A_Image {  @Prop src: string = ''  @Prop imageWidth?: number  @Prop imageHeight?: number  @Prop radius?: string = 'normal'  @Prop imageOutline?: boolean = false
  @State compWidth: number = 150  @State compHeight: number = 150
  aboutToAppear(): void {    if(this.imageWidth !== undefined){      this.compWidth = this.imageWidth    }    if(this.imageHeight !== undefined){      this.compHeight = this.imageHeight    }    if(!(this.src.startsWith("http://") || this.src.startsWith("https://"))){      this.src = this.src === '' ? 'app.media.mdi_image' : 'app.media.' + this.src    }  }
  build() {    Flex({justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center}){      Image((this.src.startsWith("http://") || this.src.startsWith("https://")) ? this.src : $r(this.src))        .width(GirdConstants.FULL_PERCENT).height(GirdConstants.FULL_PERCENT).objectFit(ImageFit.Cover)        .opacity((this.src === '') ? 0.6 : 1)        .borderRadius((this.radius == 'radius') ? FloatConstants.RADIUS_ICON : ((this.radius == 'circle') ? this.compWidth/2 : 0))    }    .width(this.compWidth)    .height(this.radius == 'circle' ? this.compWidth : this.compHeight)    .padding(this.imageOutline ? FloatConstants.SPACE_S : 0)    .backgroundColor(ColorConstants.CARD_BG)    .borderRadius((this.radius == 'radius') ? FloatConstants.RADIUS_ICON : ((this.radius == 'circle') ? this.compWidth/2 : 0))  }}