Need to display base64 encoded images from sqlite into a flex datagrid

Question

I have thumbnail images (encoded base64) as a string in a sqlite db.

I know how to decode and display the image, but I want to display it in a datagrid, so I have to retrieve (no php) the image, decode it and display it in the datagrid.

I can't think of how to do the manipulation (decode and display) to show it in the datagrid.

Currently my datagrid looks like:

<mx:DataGrid id="dg" left="60" right="51" top="200"   fontSize="25"  allowMultipleSelection="false" visible="false" dataProvider="{dp}"
               horizontalCenter="3" verticalScrollPolicy="auto" editable="true" selectionColor="#FFFF00" rollOverColor="haloSilver">
    <mx:columns>
      <mx:DataGridColumn headerText="Index:"            dataField="id" visible="false"/>
      <mx:DataGridColumn headerText="Image"             dataField="image"       width="150"/>
      <mx:DataGridColumn headerText="Description"       dataField="description" width="150" />
      <mx:DataGridColumn headerText="Web Address (URL)" dataField="url"         width="250">
        <mx:itemEditor>
          <fx:Component>
            <mx:TextInput restrict="a-zA-Z+\-.0-9@" maxChars="50" />
          </fx:Component>
        </mx:itemEditor> 
      </mx:DataGridColumn>
    </mx:columns>
  </mx:DataGrid>

and my sql code like:

  sql.text = "SELECT id, image, url, description FROM  bookMarks;";

  sql.execute();              
  var result2:SQLResult = sql.getResult();

Which currently display the base64 encoded string (as expected)

Answer 1

You are going to have to take your image and decode it into a ByteArray. Then you have to take the ByteArray and load that into a Bitmap. In the meantime, you will have to make a custom ItemRenderer that contains a BitmapImage (assuming Flex 4) and use the bitmap as the source for that image.

Your question is actually comprised of 2 or 3 subtasks.