HarmonyOS 鸿蒙Next Image组件加载本地图片
HarmonyOS 鸿蒙Next Image组件加载本地图片
HarmonyOS 鸿蒙Next Image组件加载本地图片
Image() 组件加载图片通常有以下三种方式
//1. 使用网络图片
Image(‘https://www.xsba.top/shuai.jpg’)
.width(200)
//2. 使用资源文件
Image($r(‘app.media.bg_3’))
.width(200)
//3. 使用本地图片
Image(‘本地路径’)
.width(200)
使用第3种方式加载本地图片时，需要注意路径问题
示例1： ‘file://缓存目录/文件名.png’
示例2： fileUri.getUriFromPath(‘缓存目录/文件名.png’) ， 需要 import { fileUri } from ‘@kit.CoreFileKit’
点击 下载图片 按钮后如下图
import { BusinessError, request } from ‘@kit.BasicServicesKit’
import { fileUri } from ‘@kit.CoreFileKit’
struct Testtesttt {
@State img_url: string = ‘https://www.xsba.top/shuai.jpg’
@State img_local:string = ‘’
build() {
RelativeContainer() {
Column(){
Image(this.img_url)
.width(200)
Button(‘下载图片’)
.onClick(()=>{
try {
let filePath = getContext().filesDir+’/shuai_’+Date.now()+’.jpg’
// 需要手动将 url 替换为真实服务器的 HTTP 协议地址
request.downloadFile(getContext(), { url: this.img_url,filePath:filePath }).then((data: request.DownloadTask) => {
let downloadTask: request.DownloadTask = data;
downloadTask.on(‘complete’, () => {
//方式一
this.img_local = ‘file://’+filePath
//方式二
// this.img_local = fileUri.getUriFromPath(filePath)
})
}).catch((err: BusinessError) => {
console.error(Failed to request the download. Code: ${err.code}, message: ${err.message});
})
} catch (err) {
console.error(Failed to request the download. err: ${<span class="hljs-built_in">JSON</span>.stringify(err)});
}
})
Image(this.img_local)
.width(200)
}
.alignRules({
center: { anchor: ‘container’, align: VerticalAlign.Center },
middle: { anchor: ‘container’, align: HorizontalAlign.Center }
})
}
.height(‘100%’)
.width(‘100%’)
}
}
该示例代码中使用了 request.downloadFile() 方法将远程图片下载到本地缓存目录，然后 Image() 组件即可打开本地缓存目录的图片文件
更多关于HarmonyOS 鸿蒙Next Image组件加载本地图片的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙系统中，Next Image组件加载本地图片可以通过以下步骤实现：
-
资源准备：首先，将需要加载的本地图片文件放置在项目的
resources/rawfile目录下。确保图片文件的命名和路径正确无误。 -
配置XML布局：在对应的XML布局文件中，添加Next Image组件，并设置其
ohos:id属性，以便在代码中引用。 -
加载图片：在JavaScript代码中，通过
this.$element('image_id')获取Next Image组件的引用，其中image_id是XML布局中定义的ohos:id。使用setImage方法加载本地图片。具体代码示例如下：
// 获取Next Image组件的引用
let imageElement = this.$element('image_id');
// 加载本地图片，假设图片文件名为'example.jpg'
imageElement.setImage('/rawfile/example.jpg');
注意，路径/rawfile/是相对于项目resources/rawfile目录的。
- 运行和验证：运行应用程序，检查Next Image组件是否正确加载并显示了本地图片。
如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html 。
更多关于HarmonyOS 鸿蒙Next Image组件加载本地图片的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
