HarmonyOS 鸿蒙Next如何在ArkTs中动态更换图片

HarmonyOS 鸿蒙Next如何在ArkTs中动态更换图片

@State url: Resource = $r(‘app.media.sad_and_cry’)

<Image this.url> .onClick(() => { this.showDialog = true; this.url=$r(getAMedia(this.fullness, this.cleanliness, this.mood)); console.log("mediaSource"+this.url) }) ```

我试图使用上面的代码动态更换图片，但是却没有达到想要的效果（当image被点击后，更新url，进而更新Image），看起来Image没有在url更新后自动刷新


更多关于HarmonyOS 鸿蒙Next如何在ArkTs中动态更换图片的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

$r() 是编译时处理，不支持程序运行时动态改变，运行时推荐使用 ResourceManage 对资源文件进行访问。

ResourceManage

更多关于HarmonyOS 鸿蒙Next如何在ArkTs中动态更换图片的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


大佬 请问一下是通过ResourceManager的getMediaContent方法获取到的图片的Uint8Array资源吗, 应该怎么做将Unit8Array加载到image控件里面呢，

同问，

希望HarmonyOS能继续加强在安全性方面的研发，保护用户的隐私和数据安全。

不支持动态参数  
直接填网络地址，或者用 `resourceManage` 之类的动态获取本地图片

在HarmonyOS鸿蒙Next中使用ArkTS动态更换图片，可以通过ResourceManager和Image组件实现。首先，确保图片资源已放置在resources/base/media目录下。然后，使用ResourceManager获取图片资源，并通过Image组件的src属性动态设置图片路径。具体步骤如下：

  1. 在resources/base/media目录下放置图片，例如image1.png和image2.png。
  2. 在ArkTS中导入ResourceManager和Image组件。
  3. 使用ResourceManager获取图片资源路径，例如通过this.context.resourceManager.getMediaContent方法。
  4. 在Image组件中通过src属性动态设置图片路径。

示例代码：

import { Image, ResourceManager } from '@ohos.resourceManager';

@Entry
@Component
struct DynamicImage {
  @State imageSrc: string = '';

  build() {
    Column() {
      Image(this.imageSrc)
        .width(100)
        .height(100)
        .onClick(() => {
          this.changeImage();
        })
    }
  }

  changeImage() {
    const resourceManager: ResourceManager = this.context.resourceManager;
    resourceManager.getMediaContent('image2.png').then((value) => {
      this.imageSrc = value;
    });
  }
}

通过点击Image组件，可以动态更换图片为image2.png。

回到顶部