Sencha Touch：显示数据库中的图像

Posted 2023-02-26

【中文标题】Sencha Touch：显示数据库中的图像

【英文标题】：Sencha Touch: Display Image from Database

【发布时间】：2013-07-26 12:47:30

【问题描述】：

我是 Sencha Touch 的新手，我正在尝试在视图中显示图像。图像的来源来自我模型的一个字段，采用 base64 字符串格式。我需要将此字段分配给图像 src。当我尝试在图像中设置静态 base 64 内容时，它工作正常，但是当我尝试通过分配字段动态分配时，视图为空白。

请看下面的代码

基于图像 base64 的内容将出现在“附件”字段中

我的查看代码

 Ext.define('TechHelp.view.ViewAttachment',
            
                xtype : 'viewattachment',
                  extend : "Ext.form.Panel",
                requires :"Ext.form.FieldSet" ,

      config : 
                    //stylehtmlContent : true,
                    scrollable : 'vertical',
                    title : 'Attachments',
    items : [
        xtype : "image",
       name : 'attachment',
       src: 'data:image/jpeg;base64,'+'Attachment',
           height:'100px',
       width: '100px'
, ]
 ,

 );

我的模型代码

Ext.define('TechHelp.model.Attachment', 扩展：'Ext.data.Model'，

config: 
    // define the fields. the default type is string

    fields:// ['customerId','FirstName'],
          [name:'AttachmentId',
           name:'TicketId',
           name:'Attachment',
           name:'FileName',
           ],

,

);

请帮忙。

【问题讨论】：

我对此感到非常困惑。要使用模型，您需要一个我在您的代码中没有看到的商店。此外，图像不是您可以附加商店的对象，因此您采用的方法甚至都行不通。如果您将所有 base64 数据存储在存储中，则必须提取确切的记录并使用函数将值推入。

【参考方案1】：

您可能应该为视图设置数据，然后使用 tpl 打印值：

控制器：

var itemView = Ext.create('TechHelp.view.ViewAttachment');
itemView.setRecord(record);

查看：

config : 
    scrollable : 'vertical',
    title : 'Attachments',
    tpl: '<img src="data:image/jpeg;base64,Attachment" />'
    ....
,

updateRecord: function(record) 
    if (record) this.setData(record.data);

希望对你有帮助-