Skip to content
Advertisement

How do I append blob to dom?

I’m new to blobs, so I’m hoping for a little direction to save hours more of fruitless brute-force attempts.

I use the below php (from here) to return the base64-encoded image from my database to the get javascript function.

echo '<img src="data:image/jpeg;base64,'.base64_encode( $row['Photo'] ).'"==/>';

In javascript with console.log(this.responseText), I can see the encoding. But I’m not sure how it’s appended to the dom so I can see the image in the webpage.

I’m used to appending to the dom in the following way:

var photo = document.createElement('img'); 
photo.src = X;
document.body.insertBefore(photo,document.body.firstChild);

But presumably some decoding is required on client side.

I’d be happy with a link to another stackoverflow question if you know a fitting one.

Most of the stackoverflow questions on the subject I have found (e.g.) get to decoding or the echoing, but not an explicit treatment of including that image in the DOM.

Any help appreciated.

Advertisement

Answer

The solution, as given by @CertainPerformance, is a trivial variation on the linked solutions given elsewhere.

Echoing back the following allows for appending to the DOM as expected:

echo 'data:image/jpeg;base64,'.base64_encode( $row['Photo'] );
Advertisement