Question

我想在kendo listview中将base64图像分配给img标记。

我已将代码编写为，

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

如何在剑道列表视图中将src分配给img？

请帮帮我......

Answer 1

在模型中添加一个Base64字符串属性，并将您的字节数组转换为基数为64位的编码。并尝试使用此listview模板。

 <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() {

 	$("#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

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

1 个答案: