resoucesフォルダ配下に追加したjpeg画像を、スクリプトで動的に読み込んで表示したい(CocosCreator)

Question

###前提・実現したいこと
プロパティパネルからセットされている画像とは別に、resourcesフォルダに画像を追加し、その画像を読み込み表示するようにしたいです。
ネットの情報を見ながらやってみようとしたものの、cocoscreatorの使い方に関する情報が少なく、また私自身が全くのプログラミング初心者であるためにサイトの情報が何をいっているかよくわからない状態です。

###発生している問題・エラーメッセージ
エラーは発生していませんが、意図通りに表示されません。

###該当のソースコード

cc.Class({
    extends: cc.Component,
    properties: {
        spriteFrame: {
            default: null,
            type: cc.SpriteFrame
        },
    },
    onLoad: function () {
        var image = cc.url.raw("resources/images.jpeg"); // この画像を描画したい。
        var texture = cc.textureCache.addImage(image);
        this.spriteFrame= new cc.SpriteFrame(texture);
        cc.log(this.spriteFrame); // cc_spriteFrameは入っているのを確認
        this.spriteFrame.x = 100;
        this.spriteFrame.y = 100;
        this.spriteFrame.active = true; // 表示できていない
    }
});

###試したこと
現時点ではとりあえずresourcesフォルダ内のimages.jpeg画像を読み込み表示することを目標に書いています。
ネットの情報を元に上記のように書いてみたのですが、画像を表示することができていません。
spriteとspriteframeの違いや、componentなのかnodeなのかといったことをキチンと理解できていないことが原因だとは思うのですが、用語について調べてもいまいち要領を得ることができず余計混乱しております。

###補足情報(言語/FW/ツール等のバージョンなど)
質問の内容もわかりにくいものになっているとは思いますが、ご回答よろしくお願いいたします。
また、自分自身が何をわかっていないのか、どこの考え方が間違っているのかということを明確に理解できておりません。
その点に関してもなにかご指導いただけると幸いです。

Answer 1

下記で解決しました。
ありがとうございました。

cc.Class({
    extends: cc.Component,
    properties: {
        spriteFrame: {
            default: null,
            type: cc.SpriteFrame
        },
    },
    onLoad: function () {
        var node = new cc.Node("New Sprite");
        var sprite = node.addComponent(cc.Sprite);
        node.parent = this.node;
        var image = cc.url.raw("resources/images.jpeg");
        var texture = cc.textureCache.addImage(image);
        sprite.spriteFrame= new cc.SpriteFrame(texture);
    }
});