View image on popup

I’ve been trying to add an image to a folium marker popup using the following command:

html = '<img src="image.png" style="width:400px;height:300px;">'
folium.Marker(location=(lat, lon), popup=folium.Popup(folium.element.IFrame(html=html, width=420, height=320), max_width=2000)).add_to(map)

Each time I open the saved “map.html” file in the browser and click on the marker, however, the popup shows an empty white rectangle without the image.

I even tried serving the file using “python3 -m http.server 8080” and navigating to the address “127.0.0.1:8080/map.html”, but I still see just the empty white rectangle.

Note that the file “image.png” is in the same directory as the “map.html” file.

Could you please let me know what I might be doing wrong? I’ve now been stuck with this for a few hours.

Thanks!

[EllRob]

That ( plus the .decode() ) did the trick! Thank you very much.

[EllRob]

@ocefpaf Sure. Here is a simplified version of my code (apologies if this is not ideal sscce format - I tried). Simplified in that I have replaced the part at the start with arbitrary inputs where in the full version lat/lon/etc are read from photo exif data. Same applies to values of width/height/res in the lower section for now. To run this you will just need three .jpg’s saved in the current directory.

For me, this generates the html map with 3 points in the correct position, but clicking them shows a white rectangle with a broken link (and also causes the map to pan away from the points).

import pandas
import os
import folium
from folium import IFrame
import base64


filelist = []
for photos in os.listdir(os.curdir):
    if photos.endswith(".jpg"):
            filelist.append(photos)

latlist = [51.50,51.51,51.50]
lonlist = [-0.01,0,0.01]

index = range(1,len(filelist)+1)
columns = ['Filename','Lat','Lon']         
df = pandas.DataFrame(index=index, columns=columns)

df['Filename']=filelist
df['Lat']=latlist
df['Lon']=lonlist

#Create map object:
map=folium.Map(location=[df['Lat'].mean(),df['Lon'].mean()],zoom_start=13,tiles='Stamen Terrain')

for lat,lon,Filename in zip(df['Lat'],df['Lon'],df['Filename']):
    encoded = base64.b64encode(open(Filename, 'rb').read())
    html = '<img src="data:image/jpg;base64,{}">'.format
    resolution, width, height = 75, 50, 25
    iframe = IFrame(html(encoded), width=(width*resolution)+20, height=(height*resolution)+20)
    popup = folium.Popup(iframe, max_width=1000)
    icon = folium.Icon(color="red", icon="ok")
    marker = folium.Marker(location=[lat, lon], popup=popup, icon=icon)
    marker.add_to(map)

map.save(outfile='TestMap.html')

EDIT: So it was just the specified width/height parameters which was causing the panning when clicking on the point (popup was too big for screen). Reducing these solves that. But I still haven’t solved the broken link.