HarmonyOS 如何在占位图中添加文本信息

图片的加载存在1-5秒的网络延迟，在这期间会有占位图先进行渲染，并且还需要在占位图上添加文本信息的布局，过了网络延迟的时间图片正常进行渲染。还请问需要如何在占位图中添加文本信息。

HarmonyOS

aquaa

2天前

浏览

回答 1

待解决

回答 1

按赞同

按时间

put_get

在Image组件中，图片加载成功前显示预设图片目前只能通过占位图实现，但使用alt属性设置占位图，占位图参数类型只支持string | Resource | PixelMap；

图片添加文字可以通过相关组件实现，再输出为PixelMap类型，麻烦尝试一下通过这种方式先给图片添加文字输出后再传入占位图中能否解决问题。

图片添加文字并输出，参考代码如下：

import componentSnapshot from '@ohos.arkui.componentSnapshot'
import image from '@ohos.multimedia.image'

@Entry
@Component
struct Test03 {
  @State pixmap: image.PixelMap | undefined = undefined

  build() {
    Column() {
      Stack({ alignContent: Alignment.Center }) {

        Image($r('app.media.img')).autoResize(true).width(300).height(300)
        Row() {
          Text("文字")
            .width(40)
            .height(20)
            .fontSize(16)
            .fontColor(Color.White)
            .border({ color: Color.Red, width: 1 })
            .borderRadius(4)
            .margin({ top: 10, right: 10 })
        }
        .width(300).height(300)
        .alignItems(VerticalAlign.Top)
        .justifyContent(FlexAlign.End)
      }
      .id("root")

      Button("图片添加文字")
        .onClick(() => {
          componentSnapshot.get("root")
            .then((pixmap: image.PixelMap) => {
              this.pixmap = pixmap
            }).catch((err: Error) => {
            console.log("error: " + err)
          })
        }).margin(10)

      Image(this.pixmap).width(300).height(300).border({ color: Color.Blue, width: 1 }).margin(5)
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)
  }
}