Loading Image in a column of datasource in Kendo UI Grid

Question

EDIT: SOLVED WHen i removed the ~ symbol from the path it loaded properly. I have a Kendo UI grid and it shows up the data from a datasource. However the column which is supposed to show an image does not show up. It shows as X mark.

When I put the html img tag separately in the document i can see the image in the browser. ANy idea what I am doing wrong.

$("#eventsgrid").kendoGrid({
                            dataSource: expensesDataSource,
                            navigatable: true,
                            pageable: {
                                input: true,
                                numeric: false
                            },
                            columns:[
                            {
                                field:"CardNumber"
                            },
                            {
                                field:"Description"
                            },
                            {
                            title: "Image", template: '<img src="~/Content/Themes/Default/images/Door.jpg" width="60" height="80"/>'
                            }
                                ]
                        }).data("kendoGrid");

Answer 1

Try defining the field as well:

field: "Image", title:"Image", template: '<img src="~/Content/Themes/Default/images/Door.jpg"'

If that works, then add back in the sizing parameters.

Answer 2

为什么我从正确加载的路径中删除了〜符号。