如何将 sqlite 中的图像显示到 flex 数据网格中

Question

I have a number of thumbnail images (8K ish in length), stored in a sqlite database, encoded as base64 strings.

I would like to retrieve these images and present them into a datagrid (along with some other information from the DB)

The retrieval of information from the database works, but I cannot quite "see" how to connect the decoded result from the database to the datagrid, to display the images.

Below is some code, where I show (to simplify things) a simply DGrid and want to use the dataprovider to point to the select from the DB

Any details to show how I need to change this code would be greatly appreciated:-)

  <mx:DataGrid id="dg2" dataProvider="{dp2}">
    <mx:columns>
      <mx:DataGridColumn headerText="Image"  dataField="image"  width="150"/>
    </mx:columns>
  </mx:DataGrid>

The code to generate the dp2 information is as follows. The result2 array is populated as expected and ldr appears to be populated, but imageBMap and (therefore) dp2 are null.

    sql2.text = "SELECT image FROM  bookMarks;";
    sql2.execute();

    var result2:SQLResult = sql2.getResult();        
    var data2:Array = result2.data;

    var base64Dec:Base64Decoder;
    var byteArr:ByteArray;
    var bmap:Bitmap;
    var ldr:Loader = new Loader(); 
    base64Dec = new Base64Decoder();


    if(result2.data != null)
    {
      var numRows:int = result2.data.length;

      for(var i:int = 0; i < numRows; i++)
      {     
        for(var columnName:String in result2.data[i])
        {
          if(columnName == "image") // Normally there will be more than 1 column in the select, hence this check
          {
            base64Dec.decode(result2.data[i][columnName]);
            byteArr = base64Dec.toByteArray();                
            ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderComplete);                
            ldr.loadBytes(byteArr);
          } 
        } 
      } 
    } 
    var imageBMap:Bitmap = Bitmap(ldr.content);
    dp2 = ArrayCollection(imageBMap);
  }

  private function loaderComplete(event:Event):void
  {
    var loaderInfo:LoaderInfo = LoaderInfo(event.target);
    var bitmapData:BitmapData = new BitmapData(loaderInfo.width, loaderInfo.height, false, 0xFFFFFF);
    bitmapData.draw(loaderInfo.loader);        
  }

Answer 1

You need to use in itemRenderer to display the image:

<mx:DataGridColumn headerText="Image" width="150">
    <mx:itemRenderer>
        <fx:Component>
            <s:Image source="{here you put the dataProvider}">
        </fx:Component>
    </mx:itemRenderer>
</mx:DataGridColumn>