How do I display an image in Sencha Touch?

Question

So, I have a panel in Sencha Touch and I have an image which I want to display as a component in that panel. I have tried several things along the lines of:

   logo = {
        xtype: 'component',
        autoEl: {
            src: 'http://addressofmyimage.com/image.png',
            tag: 'img',
            style: { height: 100, width: 100 }
        }
    };

Then adding above component as an item in my panel. No image is displayed. All of my other components are displayed but not the image. Not even a broken-image-link icon. I can't figure this out...

I'd rather not just insert raw html, as I cannot format that as I wish.

Answer 1

Probably better off using a panel to display the image itself. Replace the above code with...

logo = {
    xtype: 'panel',
    html: '<img style="height: 100px; width: 100px;" src="http://addressofmyimage.com/image.png" />'
};

Answer 2

You could override the Component's getElConfig method and return what you have in your autoEl object.

{
    xtype: 'component',
    getElConfig : function() {
        return {tag: 'img',
        src: 'http://addressofmyimage.com/image.png',
        style: { height: 100, width: 100 },
        id: this.id};
    }
}

That method is used when the component is rendered to get the makeup of the underlying element.