如何在Sencha Touch中显示图像？

所以，我在Sencha Touch中有一个面板，我有一个图像，我想在该面板中显示为一个组件。我已经尝试了几件事情：如何在Sencha Touch中显示图像？

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

然后在面板中添加上述组件作为项目。没有图像显示。我的所有其他组件都显示，但不是图像。甚至没有一个破碎的图像链接图标。我不知道这...

我宁愿不只是插入原始的HTML，因为我不能格式化，因为我希望。

来源

2011-11-14 Groppe

使用面板显示图像本身可能更好。将上面的代码替换为...

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

来源

2011-11-14 23:38:07 JamesHalsall

你也可以使用** bodyStyle **参数 – heyjii

true，具有background-image css属性的bodyStyle属性可以工作 – JamesHalsall

我可以添加一个tap处理事件吗？ – Ricardo

您可以重写Component的getElConfig方法并返回autoEl对象中的内容。

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

该方法用于绘制组件以获取底层元素的组成。

来源

2011-11-15 11:17:25 Stuart

您可以使用src.sencha.io API根据需要调整图像大小。下面的例子适用于我。

{ 
    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 
}

您可以查阅文档here。

来源

2012-04-10 12:50:15

如何在Sencha Touch中显示图像？

回答

相关问题