How to display iamges using DataList control

lizanta · September 10th, 2011, 10:36 PM

Hi, I have a database which contains images (I entered these as Image). So, now I want to display these images using the DataList.

Using the GridView and DetailsView was pretty easy to display them (without any codes in the Code View), but I can't design them in the way I want to (I want to show the image to the lefts and the information about it to the right). I see the DataList is easier to put it that way, but instead of the image, it just displays the path (as in the database).

What is the best way to do this or what I'm doing wrong?

Imar · September 11th, 2011, 04:05 AM

Hi there,

Take a look at this artcle: http://imar.spaanjaars.com/414/stori...with-aspnet-20

Rather than displaying the image directly in the DataList you need to setup an Image control or img element and point it to a separate aspx page which renders the image from the database based on an id or path in the query string.

Hope this helps,

Imar

lizanta · September 13th, 2011, 03:36 PM

Can I just change this:
<asp:Label ID="PhotoLabel" runat="server" Text='<%# Eval("Photo") %>' />
to something that displays the images instead of the path?. Since this information is being taken from a database according to client's selection (drop down menu)

Imar · September 13th, 2011, 03:44 PM

Not if "Photo" holds the byes for the picture. Images need to be requested separately by the browser and linked from the main HTML page using, for example, an <img /> element with its src attribute set. You can't embed the image directly into the main HTML of the page; that's just not how it works.

(Technically this isn't completely true; you could embed them with in-line images in CSS (http://www.websiteoptimization.com/s...inline-images/) but this only works well for tiny images such as icon files and has limited browser support).

But my article explains how to deal with this. Create a ViewImage.aspx file, use that in your DataList, pass the ID or the URL to the image in the query string and stream it from the ViewImage.aspx page as a separate request.

Hope this helps,

Imar