HarmonyOS NEXT鸿蒙开发:Resource加载图片

Resource介绍

详见链接:
https://www.malaoshi.top/show_1IX8kNolmDqC.html

$r 加载图片

图片资源放在 src/main/resources/base/media 文件夹中

如:src/main/resources/base/media/1.jpg

加载图片:

Image($r("app.media.1"))

**注意:**不需要图片后缀名

$rawfile 加载图片

图片资源放在 src/main/resources/rawfile 文件夹中

如:src/main/resources/base/media/1.jpg

加载图片:

Image($rawfile("1.jpg"))
<think>我们正在讨论鸿蒙系统(HarmonyOS)中的ImageBitmap使用,特别是如何加载工程内的图片资源。根据引用[2]和引用[3],我们可以知道在鸿蒙系统中,可以使用ImageBitmap构造函数,并传入一个字符串路径来加载本地图片。引用[2]提到:支持本地图片,例如`ImageBitmap("resource://RAWFILE/example.png")`,其中`resource://RAWFILE/`是用于加载rawfile目录下的资源。引用[3]则提供了另一种方式:`ImageBitmap("common/images/example.jpg")`,并且说明图片加载的起点为`ets`文件夹。同时,引用[3]还指出,在ArkTS卡片上不支持网络路径、datashare://路径以及file://data/storage路径。因此,要加载工程内的图片,我们可以使用以下两种方式之一:1.使用`resource://`协议:这通常用于访问`resources/rawfile`目录下的文件。例如:`ImageBitmap("resource://RAWFILE/example.png")`2.直接使用相对路径:起点为`ets`文件夹,例如图片放在`ets/common/images/example.jpg`,则可以使用`ImageBitmap("common/images/example.jpg")`。但需要注意的是,引用[3]中明确说明在ArkTS卡片上不支持网络路径等,所以我们只能使用本地资源路径。步骤:1.将图片文件放置在工程目录中的合适位置。有两种常见的放置位置:-放置在`resources/rawfile`目录下:此时使用`resource://RAWFILE/文件名`。-放置在`ets`目录下的某个子目录中(例如`ets/common/images`):此时使用相对于`ets`的路径(如`common/images/文件名`)。2.在代码中创建ImageBitmap对象:```typescriptletimageBitmap:ImageBitmap=newImageBitmap("resource://RAWFILE/example.png");//或者letimageBitmap:ImageBitmap=newImageBitmap("common/images/example.jpg");```3.注意:引用[3]还提到,从APIversion9开始,该接口支持在ArkTS卡片中使用。所以请确保你的API版本符合要求。4.另外,引用[3]指出当前ImageBitmap的width和height属性值为0,这可能意味着在创建后不能立即获取到宽高(因为加载是异步的?)。但是,根据标准的ImageBitmap行为,它应该是异步加载的,但鸿蒙的文档没有明确说明。我们可以参考类似浏览器的API,通常使用Promise。然而,在引用[2]和[3]中,并没有提到Promise,而是直接通过构造函数创建。因此,我们需要查看最新的鸿蒙API文档确认。如果按照引用[1]的提示,鸿蒙可能提供了类似createImageBitmap的方法(返回Promise),但引用[2]和[3]显示的是直接使用构造函数。这里可能存在差异。由于用户的问题是关于“鸿蒙Next”,我们应该以最新的官方文档为准。但是,根据提供的引用,我们只看到了直接使用构造函数的方式。因此,我们按照引用[2]和[3]的方式使用。如果遇到图片加载异步的问题,可能需要使用回调或事件,但当前引用中未提供。因此,建议在实际开发中测试或查阅最新文档。总结:使用`newImageBitmap(path)`来加载工程内的图片,其中path的写法取决于图片存放的位置。示例代码:```typescript//方式1:使用rawfile资源letimageBitmap1=newImageBitmap("resource://RAWFILE/example.png");//方式2:使用ets目录下的图片letimageBitmap2=newImageBitmap("common/images/example.jpg");```注意:在放置图片时,需要确保在编译时这些图片会被打包到应用中。另外,根据引用[3],支持的图片格式包括:bmp、jpg、png、svg和webp。如果图片加载失败,请检查路径是否正确,以及图片是否被正确放置在项目中。相关问题:1.如何在鸿蒙系统中加载网络图片并转换为ImageBitmap?2.ImageBitmap对象有哪些属性和方法?如何获取图片的宽高?3.在鸿蒙系统中,ImageBitmap和PixelMap有什么区别?4.如何处理ImageBitmap加载失败的情况?5.鸿蒙系统支持哪些图片格式的ImageBitmap?</think>在鸿蒙系统中使用 Next ImageBitmap 加载工程内图片的方法如下: ### 核心方法 1. **使用本地路径加载**: ```typescript let imageBitmap = new ImageBitmap("common/images/example.jpg"); ``` 其中路径起点为 `ets` 文件夹,支持相对路径[^2][^3]。 2. **使用资源协议加载**: ```typescript let imageBitmap = new ImageBitmap("resource://RAWFILE/example.png"); ``` 适用于 `resources/rawfile` 目录下的资源[^2]。 ### 详细步骤 1. **放置图片资源**: - 将图片文件放入工程目录: - `ets/common/images/`(推荐) - 或 `resources/rawfile/` 2. **创建 ImageBitmap 对象**: ```typescript // 方式1:ets目录加载 const localImage = new ImageBitmap("common/images/photo.webp"); // 方式2:rawfile资源加载 const rawfileImage = new ImageBitmap("resource://RAWFILE/graphic.svg"); ``` 3. **支持格式**: - BMP, JPG, PNG, SVG, WEBP[^2][^3] ### 注意事项 1. **路径限制**: - 禁止使用网络路径(`http://`)、`datashare://` 和 `file://data/storage`[^3] - 路径大小写敏感(Linux内核) 2. **异步加载建议**: 由于图片加载需要时间,建议在异步任务中处理: ```typescript async function loadImage() { try { const bitmap = new ImageBitmap("common/images/photo.jpg"); // 使用setTimeout等待资源加载 setTimeout(() => { console.log(`Width: ${bitmap.width}, Height: ${bitmap.height}`); }, 100); } catch (error) { console.error("加载失败: " + error); } } ``` 3. **属性访问**: - `width`/`height` 属性在资源加载完成后才有值 - 初始值为0[^3],需异步获取实际尺寸 ### 完整示例 ```typescript // 创建ImageBitmap const myBitmap = new ImageBitmap("common/images/header.png"); // 在Canvas中使用 const ctx = myCanvas.getContext('2d'); setTimeout(() => { ctx.drawImage(myBitmap, 0, 0, myBitmap.width, myBitmap.height); }, 200); ``` > **路径起点说明**: > `common/images/` 对应实际路径 `ets/common/images/`[^3], > `resource://RAWFILE/` 对应 `resources/rawfile/` 目录[^2]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值