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

摘要：
图片组件(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：是否显示外框线
 */
@Component
export 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))
  }
}

四、源码下载