HarmonyOS 自定义组件中，Image 控件无法更新图片

设置一个自定义组件。

@Component  
struct ImgItem {  
  @Prop img: PixelMap | null = null  
  @Prop title: string = "测试"  
  
  build() {  
    Column() {  
      Text(this.title)  
      Image(this.img).width(100).height(100).backgroundColor("#f00")  
    }  
  }  
}

在页面使用：

@Entry  
@Component  
struct Index {  
  @State img: PixelMap | null = null  
  @State title: string = ""  
  fromRawFile(name: string): Promise<PixelMap> {  
    let testdata = getContext().resourceManager.getRawFileContentSync(name)  
    let imageSource = image.createImageSource(testdata.buffer)  
    return imageSource.createPixelMap()  
  }  
  async aboutToAppear() {  
    this.img = await this.fromRawFile("test.jpg")  
    this.title = "测试2"  
  }  
  
  build() {  
    Column() {  
      ImgItem({  
        img: this.img,  
        title: this.title  
      }).margin({ top: 50 })  
      Button("更换").onClick(async () => {  
        this.img = await this.fromRawFile("test.png")  
        this.title = "测试3"  
      }).margin({ top: 14 })  
    }.height("100%").width("100%")  
  }  
}

img无法更新，title可以更新。

HarmonyOS

Heiang

2024-09-24 11:48:52

浏览

回答 1

待解决

回答 1

按赞同

按时间

superinsect

用这种形式定义图片可以更新 img:Resource = $r(‘app.media.img’)

如果必须要用到PixelMap 只需要改变下数据绑定类型即可。

import { image } from '@kit.ImageKit';  
@Component  
struct ImgItem {  
  @Prop boo:Boolean  = true  
  @Link  imagePixelMap: image.PixelMap | undefined  
  @Prop title: string = " "  
  
  build() {  
    Column() {  
      Text(this.title)  
      Image(this.imagePixelMap).width(100).height(100).backgroundColor("#f00")  
    }  
  }  
  
}  
@Entry  
@Component  
struct Index {  
  @State imagePixelMap: image.PixelMap | undefined = undefined  
  @State imagePixelMap2: image.PixelMap | undefined = undefined  
  @State title: string = ""  
  @State boo:Boolean  = true  
  async aboutToAppear() {  
  
    this.imagePixelMap = await this.getPixmapFromMedia($r('app.media.startIcon'))  
    this.title = "测试"  
  }  
  
  build() {  
    Column() {  
      ImgItem({  
        boo:this.boo,  
        imagePixelMap: this.imagePixelMap,  
        title: this.title  
      }).margin({ top: 50 })  
      Button("更换").onClick(async () => {  
  
  
        this.imagePixelMap = await this.getPixmapFromMedia($r('app.media.icon'))  
        this.title = "测试3"  
        this.boo = !this.boo  
      }).margin({ top: 14 })  
      if (this.boo ) {  
        Image(this.imagePixelMap).width(100).height(100).backgroundColor("#f00")  
      }else  {  
        Image(this.imagePixelMap2).width(100).height(100).backgroundColor("#f00")  
      }  
  
    }.height("100%").width("100%")  
  }  
  public  async getPixmapFromMedia(resource: Resource) {  
    let unit8Array = await getContext(this)?.resourceManager?.getMediaContent({  
      bundleName: resource.bundleName,  
      moduleName: resource.moduleName,  
      id: resource.id  
    })  
    let imageSource = image.createImageSource(unit8Array.buffer.slice(0, unit8Array.buffer.byteLength))  
    let createPixelMap: image.Pix

2024-09-24 15:57:43

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 自定义组件中，Image 控件无法更新图片

订阅鸿蒙技术特刊，精选内容抢先看