3

I'm trying to display a base64 encoded image aligned to some HTML text in Jupyter notebooks. The code below is an initial attempt - the image (downloaded from https://stackoverflow.com/company/logos) is show belown the text.

import base64
from   io import BytesIO
from   IPython.display import Image
from   IPython.core.display import display, HTML

with open(r'H:\se-icon.png', 'rb') as f:
    data = BytesIO(f.read())
dataEncoded = base64.b64encode(data.getvalue())

display(HTML('<h3>Some Text</h3>'))
display(Image(dataEncoded, format='png', width=100))

enter image description here

The desired output is something like below. Ideally I could use just HTML code, with the img tag, however this does not work for my particular case, as the output of the notebook is emailed on. Use of the img tag does not guarantee that the image is displayed.

enter image description here

Is there any way to display the image aligned to the HTML text?

zelta
  • 31
  • 5
  • have you tried using the img tag with src equals your base64? See [here](https://stackoverflow.com/questions/8499633/how-to-display-base64-images-in-html). Then you can try to style it using CSS (float:right) for example. Something like HTML('

    Some Text

    ')     – anki Feb 27 '19 at 08:14
  • @anki Yes I tried that approach - it renders fine in the notebook. But as my use case emails the notebook on, this approach does not seem to work in the generated email. – zelta Feb 27 '19 at 08:26
  • I tried your code snippet briefly, but in my case no image is shown, will check back later... – anki Feb 27 '19 at 08:44

0 Answers0