CODEWITHSUNDEEP
c#asp.netgridviewdatatable
panky sharma
panky sharma

Reputation: 2159

Display image in Div from DataBase in ASP.NET

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>

Upvotes: 2

Views: 4435

Answers (2)

rick schott
rick schott

Reputation: 20617

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

Upvotes: 2

Adam
Adam

Reputation: 16199

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='' />

Upvotes: 0

Related Questions