Display image in Div from DataBase in ASP.NET

Question

In this scenario - I have image names (eg:- abc.jpg) saved in a database & actual images lies in a folder in file system (~/ClientImages/).

Now I want to retrieve image from db:

ImageUrl = <%# string.Format("~/ClientImages/{0}", Eval("image")) %>

re-size it to 600*400 & display in a div on the page.

I have created stored procedure & using Grid View but unable to accomplish it.

Also can I do it without Grid View, I mean how to set datatable image

dt.Rows[0]["image"]

to a div through cs ?

Thanks in Advance

Update

Only for nOObs :p It is a very basic method,You can also fill the datagrid from CS file,But I opted dirty approach ie.SqlAdaperSource Take a Gridview choose - DataSource (ie :- SqlDataAddapter,go through the wizard ).

    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
    DataKeyNames="id" DataSourceID="SqlDataSource1">
    <Columns>          
   <asp:TemplateField>
  <ItemTemplate>
  <asp:Image ID="img12" runat="server" Width="600px" Height="400" ImageUrl='<%# Page.ResolveUrl(string.Format("~/ClientImages/{0}", Eval("image"))) %>' />

  </ItemTemplate>
  </asp:TemplateField>

    </Columns>

</asp:GridView>


## SqlDataSource ##
<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
    ConnectionString="<%$ ConnectionStrings:XXXXConnectionStringName %>" 
    SelectCommand="Stored_Procedure_Name" SelectCommandType="StoredProcedure">
</asp:SqlDataSource>

score 2 · Accepted Answer · edited May 23 '17 at 12:20

2

You can constrain and resolve the image for a <img> or <asp:image>:

<div>
   <img id="img1" runat="server" width='600' height='400' 
        src='<%# Page.ResolveUrl(string.Format("~/ClientImages/{0}", Eval("image"))) %>' />
</div>

<div>
   <asp:image id="img1" runat="server" Width='600' Height='400'  
        ImageUrl='<%# Page.ResolveUrl(string.Format("~/ClientImages/{0}", Eval("image"))) %>' />
</div>

If you want to resize images on the fly you can use the code in this question:

create fixed size thumbnail dynamically on listview control

edited May 23 '17 at 12:20

Community

1
1

answered Dec 20 '11 at 02:35

rick schott

21,012
5
52
81

2

I think the key here is the call to Page.ResolveUrl(). My bet is the ~ in his original code is the only thing tripping him up. He's expecting the markup to translate that url, when all he's really doing is writing a tilde to the html page, and the browser doesn't know what to do with it. – Joel Coehoorn Dec 20 '11 at 02:49

score 0 · Answer 2 · answered Dec 20 '11 at 01:46

Resizing the image can be done easily. Here is an example: http://snippets.dzone.com/posts/show/4336

As for viewing the image the code looks fine to me. What is the issue with displaying the image. You know that if you are outputting it via ASP.NET you will need to do

<img src='<%# string.Format("/ClientImages/{0}", Eval("image")) %>' alt='' />

Display image in Div from DataBase in ASP.NET

2 Answers2