kendo listview将base64图像分配给<img>标签

我想在kendo listview中将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>

如何分配SRC剑道列表视图的img目录？

请帮我...

来源

2015-04-30 Shital Kadam

添加一个字符串的Base64财产您的模型和字节数组转换成具有基本64位编码。并尝试使用此列表视图模板。

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

参见与本jQu的Base64例如

<!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>

红霉素

来源

2015-04-30 08:39:29 111

嘿感谢了很多......其工作由字节[]图像转换为模型的Base64 .. –

kendo listview将base64图像分配给<img>标签

回答

相关问题