0

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.

scon
  • 59
  • 1
  • 6
  • If the `src` is formatted properly, there shouldn't be any additional fiddling necessary, I'd think. You'd want `x` to be `"data:image/jpeg;base64,1234=="` or something of the sort – CertainPerformance Aug 22 '20 at 02:51
  • Ah, OK. So you think then it should be quite straight forward then after I've got the echo back. Alright. Thanks I'll try some more using .insertBefore method and come back with results. – scon Aug 22 '20 at 02:53
  • If `X` contains what it should, then yeah, I think that'd work. Look at the rendered JS to see what it's like to debug. (The `X` should not contain the ` – CertainPerformance Aug 22 '20 at 02:54
  • By 'rendered JS' do you just mean the webpage? Or is there a section in the console you are specifically referring to? – scon Aug 22 '20 at 02:56
  • I mean the source HTML the client sees, like what you see when you do control-U – CertainPerformance Aug 22 '20 at 02:57
  • Ah, cool - thanks CertainPerformance. I will spend some more time trying with that confidence. Thanks for your help. – scon Aug 22 '20 at 02:58
  • That worked. Thanks again CertainPerformance. – scon Aug 22 '20 at 03:28

1 Answers1

0

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'] );
scon
  • 59
  • 1
  • 6