Cocos Creator教程：动态修改精灵图片并解决图片路径问题

今天在用Cocos Creator写代码过程中，需要给7个精灵动态修改图片。出现了下面错误。图片找不到

自己就很郁闷，查看图片路径又是没有问题的

下面给出有bug和解决bug的代码
有bug

for (let i:number = 0;i<7;i++){
    let spriteFrame = new SpriteFrame();
    let imagePath = "ui/Atlas/gameHall/game_type_btn_" + (i+1) + ".png";
    console.log("imagePath = ",imagePath);
    resources.load(imagePath,SpriteFrame,(err,res)=>{
        if (err){
            console.log("图片不存在",err)
            return;
        }
        spriteFrame = res;
        this.hallImage[i].spriteFrame = spriteFrame;
    })
}

没bug

for (let i:number = 0;i<7;i++){
    let spriteFrame = new SpriteFrame();
    let imagePath = "ui/Atlas/gameHall/game_type_btn_" + (i+1) + "/spriteFrame";
    console.log("imagePath = ",imagePath);
    resources.load(imagePath,SpriteFrame,(err,res)=>{
        if (err){
            console.log("图片不存在",err)
            return;
        }
        spriteFrame = res;
        this.hallImage[i].getComponent(Sprite).spriteFrame = spriteFrame;
    })
}