Anzeigen dynamischer Bilder im Kendo-Gitter - JSON, Kendo-UI, Kendo-Gitter

Ich möchte dynamische Bilder in Kendo Grid einfügen. Ich erhalte JSON-Daten.

Und ich habe folgenden Code

 var grid = $("#timeSegmentGrid").kendoGrid({
//var icon="";
dataSource: {
transport: {
read: function (options) {
getTimeSegmentList("", onSuccess, null);
function onSuccess(responseData) {
if (responseData.segments != null)
options.success(responseData.segments);
else
options.success([]);
}
}
},
pageSize: 5
},
pageable: {
input: true,
numeric: false,
pageSizes: false,
refresh: true
},
toolbar: kendo.template($("#template").html()),
columns: [
{ field: "display_name", title: "&{"Name"}" },
{ field: "display_order", title: "&{"Display Order"}" },
{ field: "icon",
title: "Icon"
}
]
}).data("kendoGrid");

"icon" enthält den Pfad zum Bild. Jetzt kann ich den Pfad drucken, aber ich weiß wirklich nicht, wie ich das Bild gemäß diesem Pfad anzeigen soll. Jede Hilfe wird sehr geschätzt.

Antworten:

Kannst du es versuchen:

columns : [
{
field: "icon",
title: "Icon",
template: "<img src="/images/#= icon #" alt="image" />"
}
]

Versuchen Sie, dies kann hilfreich sein

@(Html.Kendo().Grid<TelerikMvcAppCombo.Models.ImageModel>()
.Name("grdImageModel")
.Columns(columns =>
{
columns.Bound(c => c.IMAGESIZE_ID).ClientTemplate("<input type="checkbox"     value =#IMAGESIZE_ID#  />");
columns.Bound(c => c.IMAGESIZE_NAME).Width(140);
columns.Bound(c => c.IMAGESIZE_DESC).ClientTemplate("<img src="/images/" +
Url.Content("~/Images/") + "#=IMAGESIZE_NAME#"/>");
columns.Bound(c => c.created_by);
columns.Bound(c => c.created_date);
columns.Bound(c => c.modified_by);
columns.Bound(c => c.modified_date);
})
.HtmlAttributes(new { style = "height: 580px;" })
.Scrollable()
.Groupable()
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(10)
)
.DataSource(datasource => datasource
.Ajax()
.Read(read => read
.Action("GetData", "Image")
))

)