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

Question

我正在使用 Google Colab 使用 Python 3.0 創建地圖，並且我已經使用 Basemaps 完成了此操作。 我接下來嘗試使用谷歌地圖創建類似的地圖。 我找到了兩個 python 包，即 gmaps 和 gmplot。 似乎 gmaps 需要谷歌 API 但 gmplot 不需要，因此我使用的是 gmplot。

使用 gmplot，我可以創建一個文件“my_map.html”，如果我下載到本地桌面，我可以在瀏覽器中打開並正確查看 map。

但是，我想在筆記本 output 單元中查看 map 而無需下載到本地計算機。 下圖是我嘗試過的截圖……沒有錯誤，但也沒有顯示。

是否有一些像 %matplotlib inline 這樣的命令需要執行才能在 output 單元格中顯示文件的內容？ 還是有更好的解決方案

Answer 1

嘗試文件的完整路徑： /content/my_map.html

代碼應該是：

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

Answer 2

請嘗試以下代碼：

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

它確實對我有用。 :)

Answer 3

如果 html 包含位於 colab 或（映射的）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  

但是，它適用於標准網址：

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

Answer 4

Colab 不會在 html 中顯示本地文件圖像。 您需要將 png 文件轉換為 base64

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

並使用顯示圖像

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