Comment puis-je afficher une image dans le Sencha Touch?

Donc, j'ai un panneau dans le Sencha Touch et j'ai une image que je veux afficher en tant que composant dans le panneau. J'ai essayé plusieurs choses le long des lignes de:

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

Puis en les ajoutant au-dessus de composant comme un élément de mon jury. Aucune image n'est affichée. Tous mes autres composants sont affichés, mais pas l'image. Même pas un broken-image-icône de lien. Je ne peux pas comprendre cela...

Je préfère ne pas simplement d'insérer du html brut, que je ne peux pas formater que comme je le souhaite.

OriginalL'auteur Groppe | 2011-11-14

  1. 5

    Probablement mieux d'utiliser un panneau d'affichage de l'image elle-même. Remplacer le code ci-dessus avec...

    logo = {
    xtype: 'panel',
    html: '<img style="height: 100px; width: 100px;" src="http://addressofmyimage.com/image.png" />'
};
    Vous pouvez utiliser bodyStyle paramètre
    vrai, bodyStyle propriété avec un background-image d'une propriété css serait de travailler
    puis-je ajouter un robinet gestionnaire d'événement?

    OriginalL'auteur JamesHalsall

  2. 4

    Vous pourriez remplacer le Composant getElConfig méthode et de retour que vous avez dans votre autoEl objet.

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

    Cette méthode est utilisée lorsque le composant est rendu à obtenir le maquillage de l'élément sous-jacent.

    OriginalL'auteur Stuart

  3. 3

    Vous pouvez utiliser ces.sencha.io API pour redimensionner l'image comme vous le souhaitez. Belowed exemple fonctionne pour moi.

    {
    xtype: 'image',
    src: 'http://src.sencha.io/100/100/http://www.skinet.com/skiing/files/imagecache/gallery_image/_images/201107/windells_hood.jpg',
    height: 100
}

    Vous pouvez trouver de la documentation ici.

    OriginalL'auteur Piotr Czyż