1

My goal is to display an image in Sencha Touch 2.

As of now, I'm doing something like this:

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

In the future, I want to get those images from the database.

In PouchDB, this looks like:

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

I am trying to accomplish the following:

Say there are 2 buttons (ids: ['b1', 'b2']. When I click on one, I get taken to another page and see the image that corresponds with the clicked button.

I look up 'b1' in the database and find the base64 image. How can I display that? It looks like the "src" property is only for urls.

pushkin
  • 9,575
  • 15
  • 51
  • 95

2 Answers2

1

I think you can still use src -- but you'll have to prepend the base64 bits with the proper data:image/png;base64, bit.

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

You could also simply create a generic component and shove some raw HTML (with your base64 image code) into its html config.

Something like:

{
    xtype : 'component',
    html  : '<img alt="Embedded Image" src="data:image/png;base64,' + record.data + '" />'
}
Community
  • 1
  • 1
arthurakay
  • 5,631
  • 8
  • 37
  • 62
1

You can use blob-util to convert the attachments stored in PouchDB into usable <img/> tags.

db.getAttachment() will give you back the Blob, then use createObjectURL to convert the blob into a URL you can use.

Sure, you can also use base64 strings and convert it to a data URL (blob-util offers this functionality as well), but it is far less efficient than working directly with Blobs.

nlawson
  • 11,510
  • 4
  • 40
  • 50
  • If I'm already making a `get()` call above, should i just "include_attachments:true" and take the base64 penalty, rather than making an additional call? – pushkin Jun 26 '15 at 18:31
  • 1
    In the next release of PouchDB (3.7.0 probably), you'll be able to do `get()` with `{include_docs: true, binary: true}` and get back the blob. For now, it's probably more efficient to do the extra request, rather than go with base64. – nlawson Jun 28 '15 at 10:40