extjs를 사용하여 격자 열에 BLOB 이미지 표시

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 
}], 

'iconBmp'공연이 :

R0lGODlhFgAWALMAAB1ChF9vjzljwliE34Kl8b/I16PD + 8zMzPDw7gAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAFgAWAAAIkgAPCBxIsKBBgQgSKlzIkCHChhAbPoxIEcHEihAvJixQwECBihoNGCBAksDHjAcWdhwgQMCAASYTClh40QDLly1hdpypsCbLhARykuSZ0GcAhQUCEMBJM6VCm0QRjGQJoK nKnzJbCgBQtadThS9Pgvya0OYAjBbJJnxpAKPGtQPEoozIcSzaiG/vptUr8aDfgwEBADs =

내가 진짜 이미지로이 이미지 ('iconBmp')를 표시하는 방법

?

미리 감사드립니다. 나 자신에 대한 답변

Answer 1

데이터를 base64 형식으로 이미 오기 때문에, 나는 단지 라인을 작성해야,이다 : 나는 gif 쓰기

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 이미지가 라인이기 때문에 I 이미지가 어떤 형식인지 확인해야했습니다.

Answer 2

이미지가 유효한 Base64로 다시 돌아 오는 것 같습니다. 어쩌면이 같은, 정말있을 경우 이것은 아마도 ... 확실하지 최고의 내선 JS의 방법이 아니다 ...하지만 난 당신이 HTML 및 내선 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}" />' 
}