HarmonyOS 鸿蒙Next 已知图片的uri，如何通过uri把图片展示在Image组件中

发布于 1周前 作者 vueper 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 已知图片的uri，如何通过uri把图片展示在Image组件中 已知图片的uri,如何通过uri把图片展示在Image组件中呢

Harmonyos Next教程
3 回复

正确的uri是可以直接显示的。拿到的是文件的沙箱路径吗？通过调用@ohos.file.fileuri模块的fileuri.getUriFromPath(file.path)将沙箱路径转化为沙箱uri再展示

this.uri = fileUri.getUriFromPath(path);
Image(this.uri)

参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-file-fileuri-V5#fileurigeturifrompath

更多关于HarmonyOS 鸿蒙Next 已知图片的uri，如何通过uri把图片展示在Image组件中的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-image-V5#示例2

可以看下这个示例。

在HarmonyOS 鸿蒙Next中，如果你已知图片的URI，并希望将其展示在Image组件中，可以使用以下方式：

  1. 确保URI有效性：首先确认你的URI是有效的，并且指向的图片资源是可以访问的。

  2. Image组件设置：在XML布局文件中，添加一个Image组件。例如：

    <Image
    ohos:id="$+id:my_image"
    ohos:width="match_parent"
    ohos:height="match_parent"
    ohos:scale_type="center_inside"/>

  3. 在代码中设置URI：在你的JavaScript或ETS（Extension TypeScript）代码中，获取Image组件的引用，并设置其source属性为已知的URI。例如，在ETS中：

    [@Entry](/user/Entry)
[@Component](/user/Component)
struct MyComponent {
    @State imageUri: string = "file:///path/to/your/image.jpg"; // 替换为你的URI

    build() {
        Column() {
            Image($this.imageUri)
                .width('100%')
                .height('100%')
                .objectFit(ImageFit.Contain)
        }
    }
}

    注意：这里的URI格式可能需要根据实际情况调整，例如如果是网络图片，则使用http://或https://开头。

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

回到顶部