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

Question

我想将 base64 图像分配给 kendo 列表视图中的 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>

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

请帮帮我...

Answer 1

在您的模型中添加一个 Base64 字符串属性并将您的字节数组转换为使用 base-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() {

  $("#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> 标签

kendo listview assign base64 image to <img> tag

asp.net-mvc

kendo-ui

kendo-listview