[RESOLVED]Getting image out of db and displaying it.

I am working from the starter site template but am trying to use the code from the photo gallery template to incorporate the display of uploaded images.

I have worked out how i can add an image to the database, but cannot figure out the best way of being able to display these images.

I need to be able to loop through the database table so a gallery so they can be incorporated into a carousel and viewed in sequence.

If anyone can help that would be appreciated.

cheers

I’ve written about saving and displaying images from a database here:  http://www.mikesdotnetting.com/Article/148/Save-And-Retrieve-Files-From-a-Sql-Server-CE-Database-with-WebMatrix

The main thing you need is the download.cshtml file which acts as the src for the image, and gets the data from the database is a format that can be displayed in a browser:

@{
    int id = 0;
    if(Request["Id"].IsInt()){
        id = Request["Id"].AsInt();
        var db = Database.Open("FileUploading");
        var sql = "Select * From Files Where FileId = @0";
        var file = db.QuerySingle(sql, id);
        Response.AddHeader("content-disposition", "inline; filename=" + file.FileName);
        Response.ContentType = file.MimeType;
        Response.BinaryWrite((byte[])file.FileContent);
    }
}

Obviously you need to amend the database, table and field names to suit your application.

Hello,

Keep the image file names and extensions in the database table. If all images in the same folder, you don’t need to keep the path to the files.

var data = Database.Open("db");
var slider = data.Query("SELECT TOP 10 * FROM Slider ORDER BY Date DESC");

And show them the page:

    <div id="sliderr">
        <ul class="rslidess rslides2">
              
            @foreach(var slide in slider){
                <li>
                <a href="@slide.Link">
                <img src="/slider/@slide.Image" alt="@slide.CompanyName" title="@slide.CompanyName">
                </a>
                <p class="caption">@slide.Title</p>
                </li>
            }   
    </ul>
    </div>

Mark as answer if helped..

Thanks for the reply Mike.  I get that…. that just provides a means to get the data out of the database and downloaded. But How do i use that code in a foreach loop to loop through a series of images and output them with the respective tags to my page?

cheers

willyx2001

Thanks for the reply Mike.  I get that…. that just provides a means to get the data out of the database and downloaded. But How do i use that code in a foreach loop to loop through a series of images and output them with the respective tags to my page?

cheers

Hey there,

Are the tags in a database? 

If you have a tag in the same database table as the images, you simply add it to your foreach loop :)

Post your code if you get stuck..

Cheers!

@foreach(var image in data){
    <img src="download?fileId=@image.FileId" />
}

thats just what I was after …many thanks Mike

cheers

Leave a Reply