Question

我的目标是在Sencha Touch 2中显示图像。

截至目前，我正在做这样的事情：

{
    xtype:'image',
    src: 'resources/icons/default_avatar.png',
    height: 256,
    width: 256
}

将来，我想从数据库中获取这些图像。

在PouchDB中，这看起来像：

"avatar.png": {
      "content_type": "image/png",
      "digest": "md5-ewjS8WP/imog6RFh07xqHg==", <-- altered
      "length": 10741,
      "data": "abe24==" <-- made this up; too long to paste
    }

我正在努力完成以下任务：

假设有2个按钮（ids：['b1'，'b2']。当我点击一个按钮时，我会被带到另一个页面，看到与点击的按钮对应的图像。

我在数据库中查找'b1'并找到base64图像。我该如何显示？看起来“src”属性仅适用于网址。

Answer 1

我认为您仍然可以使用src - 但是您必须使用正确的data:image/png;base64,位前置base64位。

{
    xtype : 'image',
    src  : 'data:image/png;base64,' + record.data
}

您也可以简单地创建一个通用组件，并将一些原始HTML（包含您的base64 image code）推送到其html配置中。

类似的东西：

{
    xtype : 'component',
    html  : '<img alt="Embedded Image" src="data:image/png;base64,' + record.data + '" />'
}

Answer 2

您可以使用blob-util将存储在PouchDB中的附件转换为可用的<img/>标记。

db.getAttachment()会返回Blob，然后使用createObjectURL将blob转换为您可以使用的网址。

当然，您也可以使用base64字符串并将其转换为数据URL（blob-util也提供此功能），但效率远远低于直接使用Blob。

在Sencha Touch中显示图像给出摘要

2 个答案: