如何在kendo-ui-sortables angular 2中使用图像

Question

我想在项目中使用图像而不是数据，有什么办法吗？

import { Component, ViewEncapsulation } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
    <div class="example-config">
        <h6>Items: {{items | json}}</h6>
    </div>
    <div class="container-fluid">
        <kendo-sortable
            [navigatable]="true"
            [animation] = "true"
            [data]="items"
            class="row"
            itemClass="item col-xs-6 col-sm-3"
            activeItemClass="item col-xs-6 col-sm-3 active"
        >
        </kendo-sortable>
    </div>
  `,
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['styles.css']
})
export class AppComponent {
  public items: string[] = [
    'Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7', 'Item 8'
  ];
}

是像这样吗？有没有办法把它用在图片上？

Have a look in this, any way to use image instead of grid of data

Answer 1

你可以像下面的代码一样使用标签：

<kendo-grid-column title="picture">
          <ng-template kendoGridDetailTemplate let-dataItem>
              <section *ngIf="dataItem.Thumb">
                <img src="{{dataItem.thumb}}" />
              </section>
            </ng-template>
      </kendo-grid-column>

Answer 2

您可以使用templates和具有指向相应图像源的字段的对象数组作为数据项，例如：

<kendo-sortable
        [navigatable]="true"
        [animation] = "true"
        [data]="items"
        class="row"
    >
    <ng-template let-item="item">
      <div class="item">
        <img [src]="item.url" [alt]="item.text" width="200" style="pointer-events: none;" />
      </div>
    </ng-template>
    </kendo-sortable>
...
public items: any[] = [
{text: 'Img 1', url: 'https://cdn.pixabay.com/photo/2017/09/01/20/23/ford-2705402__340.jpg'},
{text: 'Img 2', url: 'https://cdn.pixabay.com/photo/2017/09/24/17/19/cow-2782461__340.jpg'}

]；

EXAMPLE