Create grid column.cs in which declare old grid column value.

namespace Serene.BasicSamples.Columns
{
    using Serenity.ComponentModel;
    using System;
    using System.ComponentModel;

    [ColumnsScript("BasicSamples.InlineImageInGrid")]
    [BasedOnRow(typeof(Northwind.Entities.ProductRow))]
    public class InlineImageInGridColumns
    {
        [EditLink, DisplayName("Db.Shared.RecordId"), AlignRight]
        public String ProductID { get; set; }
        [EditLink, Width(250)]
        public String ProductName { get; set; }
        [InlineImageFormatter, Width(450)]
        public String ProductImage { get; set; }
        [InlineImageFormatter(FileProperty = "ProductImage", Thumb = true), Width(450)]
        public String ProductThumbnail { get; set; }

    }
}

New Grid.ts file.

/// <reference path="../../../Northwind/Order/OrderGrid.ts" />

namespace Serene.BasicSamples {

    @Serenity.Decorators.registerClass()
    export class InlineImageInGrid extends Serenity.EntityGrid<Northwind.ProductRow, any> {

        protected getColumnsKey() { return "BasicSamples.InlineImageInGrid"; }
        protected getDialogType() { return <any>Northwind.ProductDialog; }
        protected getIdProperty() { return Northwind.ProductRow.idProperty; }
        protected getLocalTextPrefix() { return Northwind.ProductRow.localTextPrefix; }
        protected getService() { return Northwind.ProductService.baseUrl; }

        constructor(container: JQuery) {
            super(container);
        }

        protected getSlickOptions(): Slick.GridOptions {
            let opt = super.getSlickOptions();
            opt.rowHeight = 150;
            return opt;
        }
    }
}

Add image to existing Grid that is help full to show user image.

Create formatter.ts class like below.

namespace Serene.BasicSamples {

    @Serenity.Decorators.registerFormatter()
    export class InlineImageFormatter
        implements Slick.Formatter, Serenity.IInitializeColumn {

        format(ctx: Slick.FormatterContext): string {

            var file = (this.fileProperty ? ctx.item[this.fileProperty] : ctx.value) as string;
            if (!file || !file.length)
                return "";

            let href = Q.resolveUrl("~/upload/" + file);

            if (this.thumb) {
                var parts = file.split('.');
                file = parts.slice(0, parts.length - 1).join('.') + '_t.jpg';
            }

            let src = Q.resolveUrl('~/upload/' + file);

            return `<a class="inline-image" target='_blank' href="${href}">` +
                `<img src="${src}" style='max-height: 145px; max-width: 100%;' /></a>`;
        }

        initializeColumn(column: Slick.Column): void {
            if (this.fileProperty) {
                column.referencedFields = column.referencedFields || [];
                column.referencedFields.push(this.fileProperty);
            }
        }

        @Serenity.Decorators.option()
        public fileProperty: string;

        @Serenity.Decorators.option()
        public thumb: boolean;
    }
}