How to display images stored in database as a blob, in webpage

Question

I want to display a image in webpage , which is stored in database as blob type. I am storing a image as binary/image type in database successfully. But how can i display it in webpage. I am getting a image as something like symbols(��JFIF�����fExif��II*��>) when i retrieve from the database.

you need to write something to serve the image at a URL and then use an img tag — Matt Whipple
– Matt Whipple, Commented Oct 29, 2012 at 13:23
Why are you storing the actual image in the database? Upload the file, store the file name echo out the path in an img tag... — Rick Calder
– Rick Calder, Commented Oct 29, 2012 at 13:23
@RickCalder - Depending on the size of the images, there are pros and cons to each approach. It's not as straightforward as everyone seems to think. (And as I used to think.) This is just one of many articles highlighting the pros and cons. onlineaspect.com/2007/07/10/… — David
– David, Commented Oct 29, 2012 at 13:28
I suppose it's true in some cases, although his testing criteria was seriously flawed. I don't personally think it's a good solution for regular use and particularly for large images or large numbers of users. I just don't see it as a scalable solution to be honest. The only real upside I can personally see is the ease with which you can make no longer used images go away. — Rick Calder
– Rick Calder, Commented Oct 29, 2012 at 13:49

testCoder · Accepted Answer · 2012-10-29 13:34:47Z

10

You should convert image data to base64 and then write to response, for example:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM0AAAD
 NCAMAAAAsYgRbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5c
 cllPAAAABJQTFRF3NSmzMewPxIG//ncJEJsldTou1jHgAAAARBJREFUeNrs2EEK
 gCAQBVDLuv+V20dENbMY831wKz4Y/VHb/5RGQ0NDQ0NDQ0NDQ0NDQ0NDQ
 0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0PzMWtyaGhoaGhoaGhoaGhoaGhoxtb0QGho
 aGhoaGhoaGhoaGhoaMbRLEvv50VTQ9OTQ5OpyZ01GpM2g0bfmDQaL7S+ofFC6x
 v3ZpxJiywakzbvd9r3RWPS9I2+MWk0+kbf0Hih9Y17U0nTHibrDDQ0NDQ0NDQ0
 NDQ0NDQ0NTXbRSL/AK72o6GhoaGhoRlL8951vwsNDQ0NDQ1NDc0WyHtDTEhD
 Q0NDQ0NTS5MdGhoaGhoaGhoaGhoaGhoaGhoaGhoaGposzSHAAErMwwQ2HwRQ
 AAAAAElFTkSuQmCC" alt="beastie.png" />

http://www.techerator.com/2011/12/how-to-embed-images-directly-into-your-html/

Or you can make a link to server script which return header with content type of any image and write image data directly to response.

edited Oct 29, 2012 at 13:34

answered Oct 29, 2012 at 13:25

testCoder

7,42513 gold badges59 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

testCoder Over a year ago

i already test that, work fine in ie7-9, firefox, opera, chrome, may be old browsers not support like ie6, i haven't any ability to test on ie6

testCoder Over a year ago

If you have php server side language you should use base64_encode for example stackoverflow.com/questions/8498843/…, if you have asp.net server side you should use Convert.ToBase64String Method msdn.microsoft.com/en-us/library/dhx0d524.aspx

Marcelo Carvalho Nascimento · Accepted Answer · 2018-12-11 13:09:46Z

Here's the code I used when I had to render a binary image from the database (SQL Server) into a html page using Ajax

stm = conn.prepareStatement("SELECT IMAGE FROM TABLE" );
rs = stm.executeQuery();
return rs

The raw rs is then received using ajax(stored in the "response"):

        $.post('./getImagePage.jsp', {
            action : 'getImage'
        }, function(response) {         
            if (response != ''){                                                        
                var arrayBufferView = new Uint8Array( response[0].IMAGE);                                       
                var blob = new Blob( [ arrayBufferView ], { type: "image/jpg" } );
                var urlCreator = window.URL || window.webkitURL;
                var imageUrl = urlCreator.createObjectURL( blob );                                  
                var img = document.querySelector("#fotoMb");
                img.src = imageUrl;                     
        });

And the HTML:

<img id="fotoMb" style="border:5px solid;">

Michael Antonius · Accepted Answer · 2012-10-29 14:09:07Z

0

I suggest you to don't save image to database ! That's can make your database server loading slowly ! Short answer, save image on folder of you web server and only refer the url where you save your file. Good luck !

answered Oct 29, 2012 at 14:09

Michael Antonius

9722 gold badges11 silver badges20 bronze badges

Collectives™ on Stack Overflow

How to display images stored in database as a blob, in webpage

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related