將圖像嵌入到ipython筆記本中進行發佈

Question

我有一個ipython筆記本，它具有來自本地驅動器的嵌入式圖像。我期待它與代碼單元的輸出一起嵌入到JSON中，但是當我分發筆記本時，圖像不會顯示給用戶。在Notebook中嵌入圖像的推薦方法是什麼，以便在用戶重新運行代碼單元，清除單元輸出等時不會消失？

筆記本電腦系統緩存了包含在![label](image.png)中的圖像，但它們只持續到服務筆記本的python「內核」重新啓動爲止。如果我在磁盤上重命名圖像文件，我可以關閉並重新打開筆記本，並且它仍然顯示圖像;但是當我重新啓動內核時它會消失。

編輯：如果我生成圖像作爲代碼細胞輸出然後導出筆記本到html，圖像被嵌入在HTML作爲編碼數據。當然，必須有辦法掛鉤到這個功能，並將輸出加載到markdown（或更好的「原始nbconvert」）單元格中？

from IPython.display import Image 
Image(filename='imagename.png') 

將出口（與ipython nbconvert）爲HTML，它包含以下內容：

<div class="output_png output_subarea output_execute_result"> 
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAnAAAAFgCAYAAAA... 
</div> 

然而，即使我手動嵌入這段成降價細胞，我不能得到要顯示的圖像。我究竟做錯了什麼？

PS現有（舊）答案給出了一些非常有用的指針，但不是解決方案。

Answer 1

你是否樂意使用額外的代碼單元來顯示圖像？如果是這樣，使用此：

from IPython.display import Image 
Image(filename="example.png") 

輸出單元將具有嵌入.ipynb文件中的原始圖像數據，這樣你就可以分享和圖像將被保留。

注意，Image類也有一個url關鍵字，但這隻會鏈接到圖像，除非你也指定embed=True（見documentation瞭解詳細信息）。因此，除非您指的是遠程服務器上的映像，否則使用filename關鍵字更爲安全。

如果您需要將圖像包含在Markdown單元中，即沒有單獨的代碼單元來生成嵌入的圖像數據，我不確定是否有簡單的解決方案。您可以使用python markdown extension，它允許在降價單元格中動態顯示Python變量的內容。但是，該擴展會動態生成降格單元，因此爲了在共享筆記本時保留輸出，需要使用「安裝」一節中提到的預處理器pymdpreprocessor.py運行ipython nbconvert --to notebook original_notebook.ipynb --output preprocessed_notebook。生成的筆記本將數據作爲格式爲<img src="data:image/png;base64,...">的HTML標籤嵌入到降格單元中，因此您可以從preprocessed_notebook.ipynb中刪除相應的代碼單元格。不幸的是，當我嘗試這個時，<img>標籤的內容實際上並沒有顯示在瀏覽器中，所以不確定這是否是一個可行的解決方案。 ： -/

不同的選擇是在代碼單元中使用Image類生成上面的圖像，然後使用nbconvert和自定義模板從筆記本中刪除代碼輸入單元。詳情請參閱this thread。但是，這將剝離所有來自轉換筆記本的代碼單元，因此它可能不是您想要的。

Answer 2

之所以當你把它放在一個降價細胞中

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAnAAAAFgCAYAAAA... 

標籤沒有做任何事情，是因爲IPython中使用HTML清潔劑（一種叫做Google Caja）是篩選出這個類型的標籤（和許多其他）在它可以被呈現之前。

在IPython中的HTML消毒劑可以通過添加下面一行到你的custom.js文件（通常位於~/.ipython/profile_default/static/custom/custom.js）被完全禁用：

iPython.security.sanitize_html = function (html) { return html; }; 

這不是一個很好的解決方案，雖然，因爲它帶來安全風險，這對分配並沒有太大的幫助。

後記：
呈現base64編碼字符串作爲圖像=明顯的安全問題，所以應該有卡哈人最終允許這類事情的經過（雖然the related feature request ticket第一次打開背部的方式的能力！在2012年，所以不要屏住呼吸）。