在 Google Colab 平台上的 Jupyter Notebook 中显示/渲染 HTML 文件

Question

I am using Google Colab to work create maps with Python 3.0 and I have done so using Basemaps. I am next trying to create similar maps using Google Maps. There are two python packages that I have located namely gmaps and gmplot. It seems as if gmaps requires a google API but gmplot does not hence I am using gmplot.

With gmplot, I am able to create a file 'my_map.html' which if I download to my local desktop, I can open in a browser and see the map correctly.

However I would like to see the map in the notebook output cell without downloading to the local machine. The following image is a screenshot of what I have tried... there is no error, but no display either.

is there some command like %matplotlib inline that i need execute to be able to display the contents of the file in the output cell? or is there a better solution

Answer 1

Try full path to your file: /content/my_map.html

The code should be:

import IPython
IPython.display.HTML(filename='/path/to/your/filename')

Answer 2

Please Try Following code:

from IPython.display import IFrame
IFrame(src='path/to/your/filename.html', width=900, height=600)

It did work for me. :)

Answer 3

This solution is not working for me if the html contains images located on colab or in your (mapped) google-drive:

IPython.display.HTML('<img src="/content/elmo_1.jpg">') # can't find image 
IPython.display.HTML('<img src="/content/gdrive/My Drive/elmo_1.jpg">') # can't find image  
IPython.display.HTML('<img src="/content/gdrive/My%20Drive/elmo_1.jpg">') # can't find image  

It works, however, with standard url:

IPython.display.HTML('<img src="https://github.com/blablabla/elmo_1.jpg?raw=1">') 

Answer 4

Colab won't display local file images in html. You need to convert a png file to base64

encoded = base64.b64encode(open(png_file_name, "rb").read())

And show image using

<img src="data:image/png;base64,{encoded.decode('utf-8')}" alt="" width="600" height="400">