How to use image in kendo-ui-sortables angular 2 - kendo-ui-angular2

Question

I want to use images rather than data in items, any way out there ?
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'
];
}
Like this? any way to use it with images ?
Have a look in this, any way to use image instead of grid of data

Answer 1

you can use tag like this code:
<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

You can use templates and an array of objects with a field pointing to the respective image source as data items, e.g.:
<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