Displaying images in Sencha Touch given digest

Question

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.

Answer 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.

Answer 2

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