Member Avatar for fawadkhalil

Hi all
I m using asp.net 4.0. In my data list i have used asp image tag like below

<asp:Image ID="imgSmallPics" runat ="server" ImageUrl ='~/AdsPictures/<%#Eval("pictureName")%>'

where AdsPictures is folder where images resides and pictureName is name of image return by query.

Image is not shown, when i copy url of image its http://localhost:2846/AdsPictures/%3C%25#Eval(%22pictureName%22)%25%3E

but when i use html image tag

<img src ="../AdsPictures/<%#Eval("PictureName") %>" width ="44" height ="45" />

its working fine.

How can i achieve it through asp image tag.

Regards

  • 3 Contributors
  • 5 Replies
  • 2K Views
  • 1 Year Discussion Span
  • Latest Post Latest Post by eesha.ebaad

Dani AI

Generated

You are close. The issue is that a server control property like ImageUrl binds best when the entire attribute value is a single data-binding expression. Instead of mixing a literal path with an inline Eval, use the Eval format-string overload so the final value is produced by one binding step. On a C# page, that also avoids the VB-style & concatenation that tripped .

Example using the DataList/ListView template:

<asp:Image ID="imgSmallPics"
           runat="server"
           ImageUrl='<%# Eval("PictureName", "~/AdsPictures/{0}") %>' />

That yields a proper app-relative URL (the ~ is resolved for server controls at render time). If filenames may contain spaces or special characters, consider encoding them when you populate the data, or bind via code-behind and call ResolveUrl plus HttpUtility.UrlPathEncode.

For : "/" + Eval("PictureLink") creates a site-rooted URL. That breaks as soon as your app runs under a virtual directory (e.g., ). Use app-relative paths instead:

<asp:Image ID="img"
           runat="server"
           ImageUrl='<%# Eval("PictureLink", "~/{0}") %>' />

If you prefer to be explicit about resolution:

<asp:Image ID="img"
           runat="server"
           ImageUrl='<%# ResolveUrl("~/" + Convert.ToString(Eval("PictureLink"))) %>' />

Quick checks that save time:

  • View source or DevTools to inspect the final img src the browser sees.
  • If images flash then disappear, look for a postback or template rebind that drops data. Ensure the data control is bound on initial load only (if(!IsPostBack)) or has a DataSourceID so it auto-binds.

Recommended Answers

All 5 Replies

Member Avatar for prashantchalise

Hi,

Try this

<asp:Image ID="imgSmallPics" runat ="server" ImageUrl ='<%# "~/AdsPictures/" & Eval("pictureName")%>'

Actually, I too used to have problem on attaching Eval methods with server side and pure html controls. :)

Hope this works.
Thanks,

Member Avatar for fawadkhalil

Hi

Yours code results in following error:
Compiler Error Message: CS0019: Operator '&' cannot be applied to operands of type 'string' and 'object'

I don't think i need AdsPicture inside <%#%> tags.

Member Avatar for prashantchalise

Hi,
That is not by placing "~/AdsPictures/" but due to the fact that you concatenate string with unknown object.

Relace your block with this.

<asp:Image ID="imgSmallPics" runat ="server" ImageUrl ='<%# "~/AdsPictures/" & DataBinder.Eval(Container, "DataItem.pictureName").ToString()%>' ></asp:Image>

Thanks,

Member Avatar for fawadkhalil

Well in VS 2010 the operator "&" used for concatenation gave same error which i mentioned in previous post however it works with "+" operator. Below code works fine for me:

<asp:Image ID="imgSmallPics" runat ="server" ImageUrl ='<%# "~/AdsPictures/" + Eval("PictureName")%>'  width ="44" height ="45" />

I think "&" will work in older version of .net(not sure about this)

Thank you prashantchalise for this nice piece of code.

Member Avatar for eesha.ebaad

this url is not working for me. image boxes appear on page load and then disappear immediately.don't know why

<asp:ListView runat="server" ID="listView"> 

                            <ItemTemplate>

                           <asp:Image ID="img"  ImageUrl= '<%# "/" + Eval("PictureLink")%>' width ="44" height ="45" runat="server" />


                            </ItemTemplate>
                            </asp:ListView>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.