cocos加载图片

随手记录一下使用cocos框架从resources文件夹下加载图片过程中出现的一个问题，虽然我也不懂为什么要这么改，希望有大神可以赐教一下。

初始代码如下：

import { _decorator, Component, Sprite, SpriteFrame, resources } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('ImageLoader')
export class ImageLoader extends Component {

    start() {
        this.loadImageAndApply();
    }

    loadImageAndApply() {
        const imagePath = 'images/1'; // 不包括文件扩展名

        resources.load(imagePath, SpriteFrame, (err, spriteFrame: SpriteFrame) => {
            if (err) {
                console.error(`Failed to load image at path '${imagePath}':`, err);
                return;
            }

            const sprite = this.getComponent(Sprite);
            if (!sprite) {
                console.error('Sprite component not found on the node.');
                return;
            }

            sprite.spriteFrame = spriteFrame;
        });
    }
}

简单说一下这段代码是希望能够从resources中读取图片然后挂载到节点的sprite组件上。但是经过实践发现会一直报错“找不到文件”

Failed to load image: Error: Bundle resources doesn't contain images/1
    at _loop (url-transformer.ts:106:35)
    at parse (url-transformer.ts:40:44)
    at Pipeline.sync (pipeline.ts:218:28)
    at preprocess (preprocess.ts:68:55)
    at Pipeline._flow (pipeline.ts:261:9)
    at Pipeline.async (pipeline.ts:256:14)
    at AssetManager.loadAny (asset-manager.ts:539:18)
    at Bundle.load (bundle.ts:247:31)
    at ImageLoader.loadImageAndApply (ImageLoader.ts:14:19)
    at ImageLoader.start (ImageLoader.ts:8:14)
(anonymous) @ ImageLoader.ts:16

经过伟大的gpt反复折腾之后，gpt给出了一个能够解决上述问题的方案，但我还是不是很清楚具体原理。修改后的代码如下：

import { _decorator, Component, Sprite, SpriteFrame, resources, ImageAsset, Texture2D } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('ImageLoader')
export class ImageLoader extends Component {

    start() {
        this.loadImageAndApply();
    }

    loadImageAndApply() {
        const imagePath = 'images/1'; // 资源路径，不包括文件扩展名

        resources.load(imagePath, ImageAsset, (err, imageAsset: ImageAsset) => {
            if (err) {
                console.error(`Failed to load image asset at path '${imagePath}':`, err);
                return;
            }

            // 创建 Texture2D 对象
            const texture = new Texture2D();
            texture.image = imageAsset;

            // 创建 SpriteFrame 并设置 Texture2D
            const spriteFrame = new SpriteFrame();
            spriteFrame.texture = texture;

            // 获取当前节点的 Sprite 组件
            const sprite = this.getComponent(Sprite);
            if (!sprite) {
                console.error('Sprite component not found on the node.');
                return;
            }

            // 设置 SpriteFrame
            sprite.spriteFrame = spriteFrame;
        });
    }
}

可以发现它是先将图片用imageasset读入再一步一步进行转换。

好了，就这么简单地记录一下。恳请各位大佬赐教

==============================================================

2024.02.03更新

在官方文档里找到了答案，之前没有认真看官方文档。

因为我加载的是png文件，所以得到的类型应该是ImageAsset。因此需要从imageasset到texture再到spriteframe的转换。