如何在 Sencha Touch 中显示图像？

发布于 2024-12-15 05:58:22 字数 421 浏览 1 评论 0原文

因此，我在 Sencha Touch 中有一个面板，并且有一个图像，我想将其显示为该面板中的组件。我已经尝试了以下几件事：

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

然后将上述组件添加为面板中的项目。不显示图像。我的所有其他组件都会显示，但不会显示图像。甚至没有一个损坏的图像链接图标。我无法弄清楚这一点...

我不想只插入原始 html，因为我无法按照我的意愿对其进行格式化。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

嗼ふ静 2024-12-22 05:58:22

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

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

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" />'
};

回复收藏 0 原文

赏烟花じ飞满天 2024-12-22 05:58:22

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

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

当渲染组件以获取底层元素的构成时，将使用该方法。

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.

回复收藏 0 原文

没有伤那来痛 2024-12-22 05:58:22

您可以使用 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
}

您可以在此处找到文档。

You can use src.sencha.io API to resize image as you wish. Belowed example works for me.

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

You can find documentation here.

回复收藏 0 原文

~没有更多了~