kendo listview assign base64 image to <img> tag

I want to assign base64 image to img tag in kendo listview.

I have written code as,

<script type="text/x-kendo-tmpl" id="lvTeacherData_Template">
    <img src=@Url.Content("~/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>

How to assign the src to img in kendo listview?

Please help me...

Solution

Add one Base64 string property in your Model and convert your byte array into encoded with base-64 digits. and try with this listview template.

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

See this Base64 example with 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() {

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

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

ery