散景：用Hovertool顯示圖像

我正在模擬Hovertool示例here，其中hovertool顯示蛇的圖像。我自己的數據由人名和他們的個人資料圖片組成。我有一個所有配置文件圖片的本地目錄，所以每當我得到一個名稱列表，names_ls，我有一個方法get_profile_pics將搜索該目錄*與該名單上的名稱相關聯的個人資料圖片。散景：用Hovertool顯示圖像

請注意，在snakes示例中（爲方便起見，下面的示例代碼複製）圖像imgs作爲html url存儲在ColumnDataSource data字典中。我想嘗試顯示存儲在本地驅動器上的圖像，我該怎麼做呢？

一些指針：

假設我將永遠有我給出任何名稱的個人資料照片。許多人可以有相同的名字，但get_profile_pics照顧。
我想在jupyter筆記本中運行所有這些。
圖片是.png，我也將這些配置文件圖片保存爲.npy文件，如果有幫助的話。
由於隱私問題，我不想在網上託管圖片以使用html標籤進行檢索。

蛇Hovertool示例代碼

source = ColumnDataSource(
     data=dict(
      x=[1, 2, 3, 4, 5], 
      y=[2, 5, 8, 2, 7], 
      desc=['A', 'b', 'C', 'd', 'E'], 
      imgs = [ 
       'http://bokeh.pydata.org/static/snake.jpg', 
       'http://bokeh.pydata.org/static/snake2.png', 
       'http://bokeh.pydata.org/static/snake3D.png', 
       'http://bokeh.pydata.org/static/snake4_TheRevenge.png', 
       'http://bokeh.pydata.org/static/snakebite.jpg' 
      ] 
     ) 
    ) 

hover = HoverTool(
     tooltips=""" 
     <div> 
      <div> 
       <img 
        src="@imgs" height="42" alt="@imgs" width="42" 
        style="float: left; margin: 0px 15px 15px 0px;" 
        border="2" 
       ></img> 
      </div> 
     <...other div tags for text> 
     """ 
    )

我已經試過各種格式：如PIL.Image圖像，np.arrays，並且作爲字節。 tldr：這些都不起作用。我的代碼，完整性：

list_of_pics_PIL = [...] 
list_of_pics_np = [...] 
list_of_pics_png = [...] 
type(list_of_pics_PIL[0]) #PIL.Image.Image 
type(list_of_pics_np[0]) #numpy.ndarray 
type(list_of_pics_png[0]) #bytes 

selected_pics_PIL = get_profile_pics(names_ls, list_of_pics_PIL) 
selected_pics_np = get_profile_pics(names_ls, list_of_pics_np) 
selected_pics_png = get_profile_pics(names_ls, list_of_pics_png) 

source = ColumnDataSource(
     data=dict(
      names = list_of_names, 
      height = person_height, 
      pics = selected_pics_<format> 
      ) 
     ) 

hover = HoverTool(
     tooltips=""" 
     <div> 
      <div> 
       <img 
        src="@pics" height="42" alt="@imgs" width="42" 
        style="float: left; margin: 0px 15px 15px 0px;" 
        border="2" 
       ></img> 
      </div> 
     <...other div tags for text> 
     """ 
    )

來源

2016-09-24 AndreyIto

替換@pics與文件：// @ pics和享受。

來源

2018-03-01 08:56:12 nav

散景：用Hovertool顯示圖像

回答

相關問題