asp:Image is not rendered at all inside asp:HyperLink

Question

I have this code in ASP.NET 4.5 / VS 2013

<asp:HyperLink ID="ht" runat="server" NavigateUrl='<%# Eval("Url") %>'>
   <asp:Image ID="img" runat="server" CssClass="img-responsive" 
    ImageUrl='<%# Eval("Image") %>'></asp:Image>
</asp:HyperLink>

and the image inside hyperlink is not rendered at all, why? I also have tried with static image link, but I get the same result.

I need the image inside hyperlink because I need a custom css class for the image

What is the resulting client-side markup? What is the value of `Eval("Image")`? — David, Jul 15 '14 at 18:48
I'm not certain an `asp:HyperLink` can contain markup like that. Though the `asp:HyperLink` tag has an `ImageUrl` property, setting that should be roughly equivalent (though you'll need to do some tinkering to see how to set the `CssClass` of the resulting image, not the parent anchor). You might also try a normal anchor tag instead of an `asp:HyperLink`, as anchor tags most definitely can contain other tags. — David, Jul 15 '14 at 18:55
your code should work . can you cross check that your '<%# Eval("Image") %>' has value. for this purpose take a label control assign to it. — Amit Kumar, Jul 15 '14 at 18:57
If I move the exact ImageUrl to asp:hyperlink, the image is resolved in the hyperlink, but again, I need to display the image in a separate asp:Image in order to set it's css class — Mario, Jul 15 '14 at 19:07
adding the .jpg extension does not make sense, since the tag is not rendered at all inside the hyperlink control — Mario, Jul 15 '14 at 19:13
Sounds like a publishing issue to me. Are you sure the code executing matches up with your source? — mason, Jul 15 '14 at 19:15
yes, and I have tried to local and on the remove server, same result. — Mario, Jul 15 '14 at 19:16
ASP.NET has a tendency to act smart when you don't want it to. It might be choosing not the render the element because the ImageUrl is empty or null. I would take Amit's advice and try to see if you are getting anything back from Eval("Image"), as in: `<%# Eval("Image")%>` — danyim, Jul 15 '14 at 19:18
ok, I have set the image manually, and the img tag still does not appear at all inside the hyperlink — Mario, Jul 15 '14 at 19:28
I have botstrap 3 in this theme, is it possilbe to be affected by that? I think not. Because everything else in my site is working — Mario, Jul 15 '14 at 19:29
@MarioM : I'm also using .net 4.5. and this code is working fine . check your code are getting anything from '<%# Eval("Image") %>' or not — Amit Kumar, Jul 15 '14 at 19:44
I am getting the right image url in the Eval, because if I move the Eval in the HyperLink Image Url then the image gets displayed. — Mario, Jul 15 '14 at 19:52
@MarioM Which data control are you using with? GridView, Repeater or so on. — Win, Jul 15 '14 at 20:01

score 1 · Accepted Answer · edited May 23 '17 at 10:28

I tested your code and it renders the image properly. The worst case, you can use DataList.ItemDataBound Event to bind the data.

ASPX

<asp:DataList ID="DataList1" runat="server" 
     OnItemDataBound="DataList1_ItemDataBound">
    <ItemTemplate>
        <asp:HyperLink ID="ht" runat="server">
            <asp:Image ID="img" runat="server" CssClass="img-responsive"/>
        </asp:HyperLink>    
    </ItemTemplate>
</asp:DataList>

Code Behind

public class MyClass
{
    public string Url { get; set; }
    public string Image { get; set; }
}

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        DataList1.DataSource = new List<MyClass>
        {
            new MyClass
            {
                Url = "http://www.google.com",
                Image = "https://www.google.com/images/srpr/logo11w.png"
            },
            new MyClass
            {
                Url = "http://www.msn.com",
                Image = "http://col.stb00.s-msn.com/i/80/53CAC6A10B6248682CF221B24A92.gif"
            },
        };
        DataList1.DataBind();
    }
}

protected void DataList1_ItemDataBound(object sender, DataListItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item ||
        e.Item.ItemType == ListItemType.AlternatingItem)
    {
        var item = e.Item.DataItem as MyClass;

        var ht = e.Item.FindControl("ht") as HyperLink;
        ht.NavigateUrl = item.Url;

        var img = e.Item.FindControl("img") as Image;
        img.ImageUrl = item.Image;
    }
}

If you use DataSet or DataTable, you need to cast DataItem to DataRowView. var dr = e.Item.DataItem as DataRowView;. look at this example.

score 0 · Answer 2 · answered Jul 15 '14 at 19:03

0

The asp:HyperLink Web Control renders into an anchor tag, with anything between the <asp:HyperLink> ... </asp:HyperLink> becoming the the value for the Text attribute.

I would suggest you try using an asp:ImageButton instead for your purpose.

<asp:ImageButton ID="ibtnMyControl" CssClass="img-responsive" PostBackUrl="<%# Eval("Url") %>" ImageUrl="<%# Eval("Image") %>" />

ImageButton API reference

answered Jul 15 '14 at 19:03

danyim

1,274
10
27

who told you anything between hyperlink , will become text for that . i have working example. you can check too this code showing image. – Amit Kumar Jul 15 '14 at 19:05
it's useless because I need to set the CSS property of the image to img-responsive – Mario Jul 15 '14 at 19:05
Do you need the image to be accessible server-side? Why not just use an `` inside the hyperlink? – danyim Jul 15 '14 at 19:07
I don't want to use imagebutton to have 50 postbacks on the photo gallery, I have tried img src='<%# Eval("Image") %>' /> but it does not work, img tag does not appear at all inside the hyperlink – Mario Jul 15 '14 at 19:12
@danyim I have tried that and nothing gets rendered inside the hyperlink tag – Mario Jul 15 '14 at 19:54

asp:Image is not rendered at all inside asp:HyperLink

2 Answers2

ASPX