Question

我正在开发基于ExtJS的应用程序，我有一个以BLOB格式上传图像的表单。好吧，我有数据库中的图像，但现在我想在网格列中显示它，但我不知道如何做到这一点。一些代码：

型号：

Ext.define('pssp.model.icon.IconItem', {
  extend : 'Ext.data.Model',
  fields : [{
    name : 'id',
    type : 'int'
  }, {
    name : 'fileName',
    type : 'string'
  }, {
    name : 'iconBmp', => BLOB
    type : 'auto'
  }, {
    name : 'description',
    type : 'string'
  }]
});

查看：

.
.
.
columns : [{
  xtype: 'gridcolumn',
  dataIndex : 'fileName',
  id:'fileName',
  name: 'fileName',
  text : this.i18nColFileName,
  flex : 1
}, {
  xtype: 'gridcolumn',
  dataIndex : 'description',
  id:'description',
  name: 'description',
  text : this.i18nColDescription,
  flex : 1
}, {
  xtype: 'gridcolumn', => This only show a String of bytes
  dataIndex : 'iconBmp',
  id:'iconBmp',
  name: 'iconBmp',
  text : this.i18nColIconBmp,
  flex : 1
}],

＆＃39; iconBmp＆＃39;显示这个：

R0lGODlhFgAWALMAAB1ChF9vjzljwliE34Kl8b / I16PD + 8zMzPDw7gAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAFgAWAAAIkgAPCBxIsKBBgQgSKlzIkCHChhAbPoxIEcHEihAvJixQwECBihoNGCBAksDHjAcWdhwgQMCAASYTClh40QDLly1hdpypsCbLhARykuSZ0GcAhQUCEMBJM6VCm0QRjGQJoKnKnzJbCgBQtadThS9Pgvya0OYAjBbJJnxpAKPGtQPEoozIcSzaiG / vptUr8aDfgwEBADs =

我如何将此图像（＆＃39; iconBmp＆＃39;）显示为真实图像？

提前致谢！

Answer 1

看起来你的图像在有效的Base64中回来了，这很好。这可能不是最好的Ext JS方式......不确定是否真的......但我认为你可以用HTML和Ext JS的tpl组合来做，也许是这样的：

, {
  xtype: 'gridcolumn', => This only show a String of bytes
  dataIndex : 'iconBmp',
  id:'iconBmp',
  name: 'iconBmp',
  text : this.i18nColIconBmp,
  flex : 1,
  tpl:'<img src="data:image/gif;base64, {iconBmp}" />'
}

Answer 2

我回答自己，我只需要写一行，因为数据已经是base64格式，这是：

xtype: 'gridcolumn',
dataIndex : 'iconBmp',
id:'iconBmp',
name: 'iconBmp',
text : this.i18nColIconBmp,
flex : 1,
renderer : function(value) {
  return '<img src="data:image/gif;base64,' + value +  '" />';
}

我写gif因为我的图像是一个gif图像，在那一行我必须检查图像的格式。

使用extjs在网格列中显示BLOB图像

2 个答案: