can't display an image from database in listview

I'm trying to display an avatar of user that wrote a comment. I'm using listview to display "comment, date, username and imageAvatar", but can't figure out what a problem..

<asp:Image ID="DisplayAvatarShout" 
    runat="server" 
    AlternateText='<%# Eval ("UserName") %>' 
    ImageUrl='~/images/user_images/<%# Eval ("Avatar") %>' 
    width="20px" />

<img src='~/images/user_images/<%# Eval ("Avatar") %>' 
    w开发者_如何学Goidth="20px" 
    alt='<%# Eval ("UserName") %>' />

Here is Sql connection, maybe there is a problem

 SelectCommand="SELECT aspnet_Users.UserName, Custon_Shouts.Body_shout, Custon_Shouts.Date_shout, Custon_UserInfo.Avatar FROM aspnet_Users INNER JOIN Custon_Shouts ON aspnet_Users.UserId = Custon_Shouts.UserId INNER JOIN Custon_UserInfo ON aspnet_Users.UserId = Custon_UserInfo.UserId ORDER BY Custon_Shouts.Date_shout DESC">
</asp:SqlDataSource>

Rendered HTML <img id="ContentPlaceHolder1_ListView3_DisplayAvatarShout_1" src="images/user_images/%3C%25#%20Eval%20(%22Avatar%22)%20%25%3E" alt="rokky" style="width:20px;" /> <img src='~/images/user_images/022.jpg' width="20px" alt='rokky' />

Assuming that your images specified in the Avatar column actually exist at the path on the server, and there is a resultset with valid data coming back in your SqlDataSource, then you should be able to write:

<asp:ListView ID="foo" runat="server"  DataSourceID="MySqlDataSource" >
   <ItemTemplate>
        <asp:Image ID="DisplayAvatarShout"  runat="server" 
                   ImageUrl='<%# Eval("Avatar", "~/images/user_images/{0}")%>'/>
   </ItemTemplate>
</asp:ListView>

<asp:SqlDataSource ID="MySqlDataSource">
<SelectCommand="your SQL statement">
</asp:SqlDataSource>

This tag definitely won't do what you think it does:

<img src='~/images/user_images/<%# Eval ("Avatar") %>' 
width="20px" 
alt='<%# Eval ("UserName") %>' />

You're using a server-side relative path notation with the ~ character, which means nothing client-side. A browser won't know where that file is.

A quick way to address this would be to add runat="server" to the tag, which will indicate to the ASP.NET engine that the tag needs to be processed before displaying it to the client. That will result in server-side paths being translated into meaningful client-side paths (as best it can, anyway, which it can in this case). Another option is to use a relative path to the page, such as ../images/user_images/ (or whatever the path would be).

As for why the <asp:Image> tag isn't working, can you show the rendered HTML output of that tag? If the image isn't showing in the web browser, that could be for any number of reasons. The tag may not be rendering as you think it is. Or the image may not be accessible from the web. Or the path may be wrong. Etc.

Edit: Based on your comment on the question above, your <asp:Image> tag is rendering as this:

<img id="ContentPlaceHolder1_ListView3_DisplayAvatarShout_1"
     src="images/user_images/%3C%25#%20Eval%20(%22Avatar%22)%20%25%3E"
     alt="rokky" style="width:20px;" />

To debug this, your biggest clue is that the Eval is working for the Username but not for the Avatar. Ask yourself, what's the difference between the two? The only difference I see is that one of them is called by itself while the other (the one which isn't working) is part of a larger string.

Fortunately, the Eval method has a way to handle this. Instead of this:

ImageUrl='~/images/user_images/<%# Eval("Avatar") %>'

Try this:

ImageUrl='<%# Eval("Avatar", "~/images/user_images/{0}") %>'

This is a cleaner way of injecting the Avatar value into the rest of the string.