Показать изображение в виде сетки из пути к базе данных, используя AJAX

Question

У меня есть сетка из 4 столбцов.В одном из столбцов я пытаюсь отобразить изображение.Я сохраняю путь изображения в базе данных и фактическое изображение в папке.Папка называется images.

Проблема в том, что при заполнении gridview изображение не отображается, а отображается путь к изображению.(см. прикрепленное изображение)

Имя столбца таблицы в базе данных, в которой хранится путь к изображению, называется LogoImagePath, а заголовок имени столбца таблицы сетки - ImageLogo

Вот мой код

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);
            });
        }

Пожалуйста, помогите и сообщите.Спасибо.

Answer 1

Вы должны заменить это:

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

На:

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