How to define an encoded base64 image as a background in Sencha Touch 2?

Question

I am encoding an image into base64 through the following PHP code:

$file = fopen($arquivoImagem,"rb", 0);
$gambar = fread($file,filesize($arquivoImagem)); 
fclose($file); 
$base64 = chunk_split(base64_encode($gambar));  

After this, I write the $base64 variable into a file and later I read it through ajax in Sencha Touch. I can read the $base64 variable normally, but I can't define the base64 image as a background in Sencha Touch. I am trying to do this through the code above. The "imagem" variable contains the content of $base64 variable in PHP.

Ext.define("myapp.view.Main", {
    extend: 'Ext.Panel',
    alias: 'widget.mainForm',
    requires: ['Ext.Label', 'Ext.Button'],

    initialize: function () {
        var imagem;
        var store = Ext.getStore('ImagemMenu').load();
        store.each(function(record) {
            if (record.get('local') == 0) {
                imagem = record.get('imagem');
                var estilo = "background-image: url('data:image/png;base64," + imagem + "');";
                this.setStyle(estilo);
            }
        });
    },

...  

Anyway, my question is: how can I define a base64 image as a background in Sencha Touch 2?

Thank you in advance.

Answer 1

This is a bit of a pain, because Sencha attempts to parse the string passed in and basically splits it by : which means a base64 image string won't work. You therefore need to call setStyle with an object, so for instance in your code:

var estilo = "url('data:image/png;base64," + imagem + "')";

this.setStyle({'background-image', estilo});

It's also important to note that you mustn't have a semicolon at the end of the style string otherwise it won't work.

Hope that helps!