在给定摘要的 Sencha Touch 中显示图像

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 -- 但您必须在 base64 位前添加适当的 data:image/png;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() will give you back the Blob, then use createObjectURL 将 blob 转换为 URL 您可以使用。

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

在给定摘要的 Sencha Touch 中显示图像

Displaying images in Sencha Touch given digest

sencha-touch

sencha-touch-2

couchdb

pouchdb