0

I have succeeded in collecting a Google docs thumbnail image and converting it from byte[] to base64 and then appending it to a pre-existing object in the DOM on its own using the below snippet from this answer. 

var image = $("<img>", {
"src": "data:image/png;base64," + base64_string,
"width": "250px", "height": "250px"})
.appendTo("#img_preview");

However, what I really want to do is convert the base64 object into an HTML string and then add it into a table each time a new row is generated.

$("#output").append("<tr><td>"+ image +"</td></tr>" );

One solution I have thought of is to programmatically add ids to the td elements and then use the first snippet but that doesn't seem efficient.

Can anyone help?

Community
  • 1
  • 1
Jason Allshorn
  • 1,625
  • 1
  • 18
  • 27
  • You can follow this tutorial: [Convert Image to Base64 String and Base64 String to Image](http://www.dailycoding.com/posts/convert_image_to_base64_string_and_base64_string_to_image.aspx). It is stated that the [`atob()`](https://developer.mozilla.org/en/docs/Web/API/WindowBase64/Base64_encoding_and_decoding) function decodes a string of data which has been encoded using base-64 encoding. You can also check on this [related SO post](http://stackoverflow.com/questions/6150289/how-to-convert-image-into-base64-string-using-javascript) on how to convert image into base64 string using javascript. – abielita Oct 27 '16 at 07:19

1 Answers1

1

append() accepts a htmlString or Element or Text or Array or jQuery. see: jQuery's append()

You are concatenating an Element with a htmlString which results in not a valid htmlString so the result would look like this:

<tr><td>[object Object]</td></tr>

Try to use this code:

var row = $('<tr></tr>').append('<td></td>').html(image);
$("#output tbody").append(row);

Demo (i reused the encoded image from the link you given): 

var base64_string = "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";


var image = $("<img>", {
  "src": "data:image/png;base64," + base64_string,
  "width": "250px",
  "height": "250px"
});

var row = $('<tr></tr>').append('<td></td>').html(image);
$("#output tbody").append(row);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="output">
  <tbody></tbody>
</table>
four
  • 564
  • 4
  • 6