HarmonyOS 鸿蒙Next Text中如何增加Image

可以使用ImageSpan来为Text添加图片,具体使用请参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-imagespan-V5，以下为示例:

深色代码主题

复制

@Entry
@Component
struct SpanExample {
  build() {
  Column() {
    Text() {
      ImageSpan($r('app.media.app_icon')) //资源路径
        .width('100px')
        .height('100px')
          // .objectFit(ImageFit.Fill)
        .verticalAlign(ImageSpanAlignment.CENTER)
      Span('I am LineThrough-span')
        .fontSize(25)
    }
    .width('100%')
    .textIndent(50)
  }
  }
}

更多关于HarmonyOS 鸿蒙Next Text中如何增加Image的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

bupafengyu 2楼•3 天前

Text(){

Span('文字')

ImageSpan('图片')
Span('文字')

}

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-basic-components-imagespan-V13

nodeper 3楼•3 天前

在HarmonyOS鸿蒙Next Text中增加Image，可以通过以下步骤实现：

准备图片资源：确保图片资源已正确放置在项目的资源目录中，通常位于/resources/rawfile或其他指定的资源文件夹内。

定义Image组件：在布局文件（如XML布局）中，使用<Image>标签定义Image组件。指定图片的URI或资源ID。例如：

<Image
    ohos:id="$+id:my_image"
    ohos:width="match_parent"
    ohos:height="wrap_content"
    ohos:image_src="$raw:my_image_resource" />

绑定数据（如需要）：如果图片资源是动态加载的，可以通过JavaScript或ETS（Enhanced TypeScript）代码绑定数据。例如，在ETS中：

[@Entry](/user/Entry)
[@Component](/user/Component)
struct MyComponent {
    @State imageSrc: string = 'file:///path/to/image.jpg';

    build() {
        Column() {
            Image($this.imageSrc)
                .width('100%')
                .height('200px')
        }
    }
}

调整布局：根据需要调整Image组件的宽高和布局参数，确保其与Text等其他组件协调显示。

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html