Javascript 余烬模板中的缩略图

我正在构建我的第一个ember应用程序，它有一个用户模板。它按名称显示我的用户列表。我想他们被显示为一组缩略图，而不是使用他们的头像图片

<script type = "text/x-handlebars" id = "users">
<div>{{usersCount}}</div>
<div class="col-md-2">
{{#link-to "users.create"}}<button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-plus"></button> {{/link-to}}
</div>
<div class="col-md-10">

  <ul class="users-listing">
  {{#each user in controller}}
  <li>
    {{#link-to "user" user}}
      {{user.name}}
    {{/link-to}}
  </li>
{{/each}}

</ul>

{{outlet}}
</div>
</script>

{{userscont}}
{{{#链接到“users.create”}{{{/link到}}

{{#控制器中的每个用户}

{{{#链接到“用户”用户}
{{user.name}
{{/链接到}

{{/每个}}

{{outlet}}

我一直在尝试使用引导缩略图来实现这一点，但收效甚微：

<div class="row">
  <div class="col-sm-6 col-md-3">
{{#each user in controller}}
    <a href="#" class="thumbnail">
      <img data-src="user.avatar">
{{/each}}
    </a>
  </div>
</div>

{{#控制器中的每个用户}

有人能提出解决方案吗？

请参阅文档了解：

{{#each}
{{/每个}}

还要注意，在引导中，

data src

属性仅用于占位符图像，而不是您希望实际显示的图像

{{#each}}
  <a href="#" class="thumbnail">
    <img {{bind-attr src=avatar}}>
  </a>
{{/each}}