2015-04-30 1 views
1

Я хочу присвоить base64-образ тегу img в списке кендо.kendo listview присваивать base64 изображение <img> тег

Я написал код, как,

<script type="text/x-kendo-tmpl" id="lvTeacherData_Template"> 
    <img [email protected]("~/Images/arrow_collapsed.png") id="img_${kendo.toString(id)}" alt="img" /> 
       <table> 
        <tr> 
        <td rowspan="4"> 
         #if (Avatar != null){# 
         @*var base64 = Convert.ToBase64String(Avatar);*@ 
         @*var imgSrc = String.Format("data:image/gif;base64,{0}", base64);*@ 
         <img src="String.Format('data:image/gif;base64,{0}', ${kendo.toString(Avatar)})" alt="Profile Image" height="64" width="64" /> 
         #} 
         else{# 
         <img src="@Url.Content("~/Images/avatar-icon.gif")" id="avtar" alt="avtar_img" height="64" width="64" /> 
         #}# 

        </td> 
        </tr> 
</table> 
</script> 

Как назначить СРК в IMG в кендо ListView?

Пожалуйста, помогите мне ...

ответ

1

Добавьте одну Base64 строковое свойство в вашей модели и преобразовать массив байтов в кодируются с основанием 64 цифр. и попробуйте с этим шаблоном listview.

<script type="text/x-kendo-tmpl" id="template"> 
      <img src="data:image/gif;base64,${Image}"/> 
    </script> 

Смотрите этот пример Base64 с jQu

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <base href="http://demos.telerik.com/kendo-ui/listview/remote-data-binding"> 
 
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style> 
 
    <title></title> 
 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common-material.min.css" /> 
 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.material.min.css" /> 
 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css" /> 
 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.material.min.css" /> 
 

 
    <script src="http://cdn.kendostatic.com/2015.1.429/js/jquery.min.js"></script> 
 
    <script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script> 
 
</head> 
 
<body> 
 
<div id="example"> 
 

 
    <div id="listView"></div> 
 

 
    <script type="text/x-kendo-tmpl" id="template"> 
 
    <div> 
 
     <img src="data:image/gif;base64,${Image}"/> 
 
    
 
     <h3>${Name} ${LastName}</h3> 
 
    </div> 
 
    </script> 
 
    <script> 
 
     $(function() { 
 

 
    \t $("#listView").kendoListView({ 
 
    \t \t dataSource: [{ 
 
    \t \t \t "Image": "R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==", 
 
    \t \t \t "Name": "1", 
 
    \t \t \t "LastName": "1 lastname" 
 
    \t \t }, { 
 
    \t \t \t "Image": "R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==", 
 
    \t \t \t "Name": "1", 
 
    \t \t \t "LastName": "1 lastname" 
 
    \t \t }, { 
 
    \t \t \t "Image": "R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==", 
 
    \t \t \t "Name": "1", 
 
    \t \t \t "LastName": "1 lastname" 
 
    \t \t } 
 

 
    \t \t ], 
 
    \t \t template: kendo.template($("#template").html()) 
 
    \t }); 
 
}); 
 
    </script> 
 
</div> 
 
</body> 
 
</html>

чень

+0

эй спасибо ... его работы путем преобразования байт [] изображение для base64 в модели .. –