If you have a SQL database that has an image field  in a particular table and want to return the image to the web site using web API’s then you almost have to extract the image as binary, read it to a memory stream and then save it temporarily on the server.  Pass the location back to the web page where the web page then displays the image.

What if you don’t want to create a temporary file or what if you have a lot of images for a particular product you know the user is not going to look at all of them, but since they could you’re left to run through this process anyway.  Here is another way you could do this.  Instead of creating a temporary file just stream the image back in the way of a string.  Then let your browser convert it to the binary image equivalent.

On your asp.net web API side convert the image to a string like so…. (Assuming that the LINQ result set is ‘x’ and fieldname is ‘images’).

[sourcecode language=”vb”]
Dim imagestream As Byte() = x.images.ToArray
Dim imagestring as string = Convert.ToBase64String(imagestream)
[/sourcecode]

Once you have this and you send it back to the browser you can place this in your page using a wide variety of methods. For the purposes of what I needed it for I used the syntax below using knockout.js.

[sourcecode language=”vb”]
<img class="equipphoto" alt="" data-bind="attr: {src: "data:image/jpeg;base64," + imagefile, id: imageid } " />
[/sourcecode]

Image gets displayed automatically.

Check Arvixe for great affordable web hosting and services.

Looking for quality web hosting? Look no further than Arvixe Web Hosting!