将 JPG 图像添加到叶弹出窗口答案

【问题标题】：Adding JPG Images to folium popup将 JPG 图像添加到叶弹出窗口
【发布时间】：2018-09-09 23:47:26
【问题描述】：

我尝试将图像添加到 folium 弹出窗口，但失败了。我使用 python 2.7 版本和 folium 0.50 版本。

其实我按照其他帖子里提到的页面，还是不行

http://nbviewer.jupyter.org/gist/ocefpaf/0ec5c93138744e5072847822818b4362

import folium

import base64

m = folium.Map(location = [33, -97], zoom_start = 6, tiles = "Mapbox Bright")

encoded = base64.b64encode(open('IMG_1769.JPG', 'rb').read()).decode()

html = '<img src="data:image/jpeg;base64,{}">'.format

iframe = folium.IFrame(html(encoded), width=632+20, height=420+20)

popup = folium.Popup(iframe, max_width=2650)

marker = folium.Marker([30,-100], popup=popup).add_to(m)

m.add_child(marker)

m.save("test.html")

【问题讨论】：

欢迎来到 SO！您可以扩展“它不起作用”吗？什么不起作用？你期待什么？发生了什么？
我按照你的步骤和答案，我的地图甚至不会显示。
你能解释一下html = '<img src="data:image/jpeg;base64,{}">'.format吗？最后的“格式”是什么？

标签： python popup folium

【解决方案1】：

 import base64
 from folium import IFrame

 #Add Marker
 encoded = base64.b64encode(open('mypict.jpg', 'rb').read())
 html = '<img src="data:image/png;base64,{}">'.format
 iframe = IFrame(html(encoded.decode('UTF-8')), width=400, height=350)
 popup = folium.Popup(iframe, max_width=400)

 folium.Marker(location=[43.591545, 39.728056], tooltip=html, popup = popup, 
 icon=folium.Icon(color = 'gray')).add_to(map)

【讨论】：

请不要只发布代码作为答案，还要解释您的代码的作用以及它如何解决问题的问题。带有解释的答案通常更有帮助、质量更好，并且更有可能吸引投票

【解决方案2】：

我关注了this example，它（几乎）对我有用。绘图未正确base64 解码，因为encoded 变量是字节数组而不是字符串，因此产生 b'iVBOR 标头而不是 @ 987654326@ 标头（PNG 标头的base64 版本）。

将html(encoded) 替换为html(encoded.decode('UTF-8')) 解决了该问题。

这是输出。

这是代码 sn-p。

    fig, ax = plt.subplots(figsize=(width, height))
    ax = subdf.plot(x='date', y='temperature', ax=ax, legend=False)
    ax.set_ylabel('Temp (°C)')
    png = '/tmp/temperatures_{}.png'.format(counter)
    fig.savefig(png, dpi=resolution)

    encoded = base64.b64encode(open(png, 'rb').read())



    html = '<img src="data:image/png;base64,{}">'.format
    #print(20*'-',encoded.decode('UTF-8'))
    iframe = IFrame(html(encoded.decode('UTF-8')), width=(width*resolution)+20, height=(height*resolution)+20)
    popup = folium.Popup(iframe, max_width=2650)

    icon = folium.Icon(color="red", icon="ok")
    marker = folium.Marker([lat, lon], popup=popup, icon=icon)
    marker.add_to(marker_cluster)

【讨论】：

你能解释一下 html = '<img src="data:image/png;base64,{}">'.format 为什么用 data:image 代替你的图片名称吗？