背景图像未显示在 DataList ItemTemplate 内的 div 中?

background-image not being displayed in div inside DataList ItemTemplate?

我正在尝试将 DataListItemTemplate 中的 divbackground-image 设置为 column [=35= 中的文件名] 在用作列表视图数据源的 datatable 中。

这是我目前使用的代码,其中包括两个datalists。它基于此处找到的代码:background-image eval

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TestWebApp.Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:DataList ID="DataListDiv" runat="server" RepeatColumns="5">
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server" Text="My lagel"></asp:Label>
                <div style='width:195px;height:162px;background-position:center;background-image:url(<%# Eval("image_path","~/Styles/Images/{0}") %>)'></div>
            </ItemTemplate>
        </asp:DataList>

    <asp:DataList ID="DataListImages" runat="server" RepeatColumns="5">
            <ItemTemplate>
                <asp:ImageButton ID="ImageButton2" ImageUrl='<%# Eval("image_path","~/Styles/Images/{0}")%>' runat="server" />
            </ItemTemplate>
    </asp:DataList>



    </div>
    </form>
</body>
</html>

问题是 DataListDiv 没有显示。显示第二个 datalist (DataListImages),但它使用的是 ImageButton。两者都使用相同的 eval 所以我知道绑定是正确的。

这是 datatable 的样子:

BedNum     Waiter     image_path
201        Joe        Red.png
202        Jim        Green.png
203        Mary       Red.png
204        Carl       Yellow.png

我最终通过消除 ~/ 来更改 background-image:urldiv 的相对路径:

<asp:DataList ID="DataListDiv" runat="server" RepeatColumns="5">
    <ItemTemplate>
        <div style='width:195px;height:162px;background-position:center;background-image:url(<%# Eval("image_path","Styles/Images/{0}") %>)'></div>
    </ItemTemplate>
</asp:DataList>