How do you display an image from varbinary format?

HillChris1234

I have a column in my DataTable that displays an image. All of the examples I can find use an img tag. But, my images aren't physical files on the server, they're stored as varbinary in SQL. How can I do this?

allan

On the client-side and from DataTables' perspective there is no difference - you still need an img tag to display the image. What is different is that, rather than the HTTP request just picking up a static file, you need to have a script that will query the database, read the binary data out and then send it back to the browser.

If you are using PHP (and probably all the other languages) you'll find tons of examples for this if you google for it. Just ignore the DataTables aspect - you just want to get the image data out. That aspect is beyond the scope of DataTables since DataTables itself isn't involved in that process.

You probably know this, but it is worth saying for anyone else reading, but this is one of the reasons why not to store image data in a database.

Regards,
Allan

HillChris1234

So, in addition to the ajax call that reads the data for the DataTable, I need ANOTHER script that goes BACK into the database for EACH record, and re-reads the binary for the image?

The binary is already included in the recordset, just as a string. Isn't there a way to just convert it back to binary and use that? Something like...

"render": function(data, type, row) {
    if (TableOptions.Columns[i].Header == "Navigation Image" && data != null) {
        var imgBytes = data.toString().split(",");
        return "<img src=\"data:image/gif;base64," + imgBytes + "\" />";
    } else {
        return data;
    }
},

The problem is that, "data" at this point doesn't resemble a typical byte array, it's a collection of numbers separated by a comma. Somewhere between the controller returning a byte array and the DataTables ajax call, it's getting converted or something.

How is that outside of the scope of DataTables? If I was constructing the table using Razor (I'm using .Net MVC btw), this would be fairly simple. But, because I'm using server-side processing, I have to do everything this backwards, special "DataTables" way.

allan

The binary is already included in the recordset, just as a string. Isn't there a way to just convert it back to binary and use that?

It you have the data as a base 64 string in the JSON data set already, then yes, you probably could do that. If it isn't a base64 string but some other binary format you would need to convert it to base64.

How is that outside of the scope of DataTables?

Apologies - I wasn't aware that the data was in your data stream already and also that it appears to be getting converted somewhere. My point was that getting the image out of the database isn't a DataTables function, but if you have the data in the JSON and want to render that to the page, then that obviously is DataTables related.

How would you do it with Razor? Do you use a base64 string there, or a remote script to read the file from the db?

Allan