Show image in gridview from database image path using AJAX

Question

I have a gridview of 4 columns. In one of the columns I am trying to display an image. I save the image path in the database and the actual image in a folder. The folder is called images.

The problem is when the gridview gets populated it doesn't show the image, it shows the image path. (see image attached)

The table column name in the database where the image path gets stored is called LogoImagePath and the gridview column name header is ImageLogo

Here is my code

HTML

<asp:Button ID="btnGrid" runat="server" Text="Button" />
    <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" Font-Names="Arial"
        Font-Size="10pt" RowStyle-BackColor="#A1DCF2" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White">
        <Columns>
            <asp:BoundField ItemStyle-Width="150px" DataField="ClubID" HeaderText="ClubID" />
            <asp:BoundField ItemStyle-Width="150px" DataField="ClubName" HeaderText="ClubName" />
            <asp:BoundField ItemStyle-Width="150px" DataField="ClubEmail" HeaderText="ClubEmail" />
            <asp:ImageField DataImageUrlField="LogoImagePath" HeaderText="ImageLogo" />
        </Columns>
    </asp:GridView>

C#

 protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                this.BindDummyRow();
            }
        }

private void BindDummyRow()
{
    DataTable dummy = new DataTable();

    dummy.Columns.Add("ClubID");
    dummy.Columns.Add("ClubName");
    dummy.Columns.Add("ClubEmail");
    dummy.Columns.Add("LogoImagePath");
    dummy.Rows.Add();
    gvCustomers.DataSource = dummy;
    gvCustomers.DataBind();

}

protected string FormatImageUrl(string LogoImagePath)
{

    if (LogoImagePath != null && LogoImagePath.Length > 0)

        return ("~/" + LogoImagePath);

    else return null;

}

[System.Web.Services.WebMethod]
public static string GetCustomers()
{
    string query = "SELECT * from tb_ClubDetails";
    SqlCommand cmd = new SqlCommand(query);
    return GetData(cmd).GetXml();
}
private static DataSet GetData(SqlCommand cmd)
{
    string strConnString = ConfigurationManager.ConnectionStrings["MyDbConn"].ConnectionString;
    using (SqlConnection con = new SqlConnection(strConnString))
    {
        using (SqlDataAdapter sda = new SqlDataAdapter())
        {
            cmd.Connection = con;
            sda.SelectCommand = cmd;
            using (DataSet ds = new DataSet())
            {
                sda.Fill(ds);
                return ds;

            }
        }
    }
}

AJAX

 $(document).ready(function () {
            $("#btnGrid").click(function () {
                Bind();
                return false;
            });

            function Bind() {
                $.ajax({
                    type: "POST",
                    url: "Clubs.aspx/GetCustomers",
                    data: '{}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: OnSuccess,
                    failure: function (response) {
                        alert(response.d);
                    },
                    error: function (response) {
                        alert(response.d);
                    }
                });
            };
        });
        function OnSuccess(response) {
            var xmlDoc = $.parseXML(response.d);
            var xml = $(xmlDoc);
            var customers = xml.find("Table");
            var row = $("[id*=gvCustomers] tr:last-child").clone(true);
            $("[id*=gvCustomers] tr").not($("[id*=gvCustomers] tr:first-child")).remove();
            $.each(customers, function () {
                var customer = $(this);
                $("td", row).eq(0).html($(this).find("ClubID").text());
                $("td", row).eq(1).html($(this).find("ClubName").text());
                $("td", row).eq(2).html($(this).find("ClubEmail").text());
                 $("td", row).eq(3).html($(this).find("LogoImagePath").text());
                $("[id*=gvCustomers]").append(row);
                row = $("[id*=gvCustomers] tr:last-child").clone(true);
            });
        }

Please assist and advise. Thank you.

Answer 1

You should replace this one :

$("td", row).eq(3).html($(this).find("LogoImagePath").text());

With :

$("td", row).eq(3).html("<img src=\"" + $(this).find("LogoImagePath").text() + "\">");