View image on popup

[mirthquake]

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!

[ocefpaf]

Your safest bet is to use base64 to encode the PNG and ensure it will be displayed in the Jupyter notebook. Here is an example: http://nbviewer.jupyter.org/gist/ocefpaf/992b4790ced1a740b1cb075ca814c2b9

But I admit that the situation could be improved.

[mirthquake]

Works! Thanks so much for this.

[mirthquake]

Quick followup to this. Would encoding using base64 be necessary even when trying to display non-raster image formats (say SVG) on a popup?

[ocefpaf]

Nope. See http://nbviewer.jupyter.org/gist/ocefpaf/20aa2e74e11db30da2ff07c45cd74816

[mirthquake]

Had no idea I could do this. Thanks again. Really appreciate your help with this!

[EllRob]

@ocefpaf
I attempted to replicate these steps for locally saved (in same directory as the "map.html) jpg photos. Clicking on the points opens a white rectangle popup but displays a 'broken link' symbol when opening with Chrome.

I followed your process from the following line (your Jupyter cell 4) onward:
encoded = base64.b64encode(open(png, 'rb').read())

But in my case, instead of 'png' I read the filename of my jpg.
The code behind the broken link reads:
"data:image/jpg;base64,b'/9j/4AAQSkZJRgAB....."

Any ideas what I might be doing wrong? Thanks.

[ocefpaf]

Can you share a sscce?

[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.

[ocefpaf]

The line '<img src="data:image/jpg;base64,{}">'.format must be '<img src="data:image/jpeg;base64,{}">'.format (note the jpeg vs jpg).

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

[EllRob]

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

[ocefpaf]

The decode should be needed only on Python 3 BTW.
.decode()

[ChenghaoChenCPP]

So basically it looks like this:
Filename ='abc.jpg'
encoded = base64.b64encode(open(Filename, 'rb').read())
html='《img src="data:image/jpeg;base64,{}"》'.format #replace 《》with <>
resolution, width, height = 75, 50, 25
iframe = IFrame(html(encoded.decode('UTF-8')), width=(widthresolution)+20, height=(heightresolution)+20)
popup = folium.Popup(iframe, max_width=1000)
icon = folium.Icon(color="red", icon="ok")
marker = folium.Marker(location=[37.426, -122.085], popup=popup, icon=icon)
marker.add_to(m)

[abdullah-man]

@ChenghaoChenCPP
Thanks a lot! .decode('UTF-8') solved my issue!
Thanks again.

[dambrosbruno]

Hi guys,
I know this topic is old, however i really need a little help. I have the following map:

   `#1 Import libraries:
  import folium
  import branca
  import pandas
  import openpyxl
  from folium import IFrame
  import base64
  from IPython.core.display import Image, HTML
  
  #2 create variable to the imported DF with selected columns:
  df0 = pandas.read_excel('dataarchive.xlsx', usecols = ['nome','idade','tipologia', 'raca', 'bairro', 'cidade', 'latitude', 'longitude', 'local_url_path'])
  
  #3 create new column (img_html) with the pictures:
  df0['img_html'] = df0['local_url_path'].str.replace('(.*)', '<img src = "\\1">')
  
  #4 htmlize path to the image into the new created column:
  def local_url_path(html):
      return ''+img_html+''
  HTML (df0.to_html(escape=False, formatters=dict (img = local_url_path)))
  
  #5 create html folium popup:
  def fancy_html(row):
      i = row
      
      foto = df0['img_html'].iloc[i]                             
      nome = df0['nome'].iloc[i]                             
      idade = df0['idade'].iloc[i]                           
      raca = df0['raca'].iloc[i]
      tipologia = df0['tipologia'].iloc[i]                                           
      bairro = df0['bairro'].iloc[i]                               
      cidade = df0['cidade'].iloc[i]                             
      
      left_col_colour = "#2A799C"
      right_col_colour = "#C5DCE7"
      
      html = """<!DOCTYPE html>
  <html>
  
  <head>
  
  </head>
      <table style="height: 100px; width: 300px;">
  <tbody>
  
  <tr>
      <td style="background-color: """+ left_col_colour +""";"><span style="color: #ffffff;">Foto</span></td>
      <td style="width: 200px;background-color: """+ right_col_colour +""";">{}</td>""".format(imagem) + """
  </tr>
  
  <tr>
      <td style="background-color: """+ left_col_colour +""";"><span style="color: #ffffff;">Nome</span></td>
      <td style="width: 200px;background-color: """+ right_col_colour +""";">{}</td>""".format(nome) + """
  </tr>
  
  <tr>
      <td style="background-color: """+ left_col_colour +""";"><span style="color: #ffffff;">Idade</span></td>
      <td style="width: 200px;background-color: """+ right_col_colour +""";">{}</td>""".format(idade) + """
  </tr>
  
  <tr>
      <td style="background-color: """+ left_col_colour +""";"><span style="color: #ffffff;">Raça</span></td>
      <td style="width: 200px;background-color: """+ right_col_colour +""";">{}</td>""".format(raca) + """
  </tr>
  
  <tr>
      <td style="background-color: """+ left_col_colour +""";"><span style="color: #ffffff;">Tipologia</span></td>
      <td style="width: 200px;background-color: """+ right_col_colour +""";">{}</td>""".format(tipologia) + """
  </tr>
  
  <tr>
      <td style="background-color: """+ left_col_colour +""";"><span style="color: #ffffff;">Bairro</span></td>
      <td style="width: 200px;background-color: """+ right_col_colour +""";">{}</td>""".format(bairro) + """
  </tr>
  
  <tr>
      <td style="background-color: """+ left_col_colour +""";"><span style="color: #ffffff;">Cidade</span></td>
      <td style="width: 200px;background-color: """+ right_col_colour +""";">{}</td>""".format(cidade) + """
  </tr>
  
  <tr>
  </tr>
  </tbody>
  </table>
  </html>
  """
      return html
  
  #6 create folium map:
  location = [df0['latitude'].mean(), df0['longitude'].mean()]
  zoom_start = 12
  m = folium.Map(location=location, zoom_start=zoom_start)
  
  #7 insert markers in the map:
  for i in range(0,len(df0)):
      html = fancy_html(i)
      iframe = branca.element.IFrame(html=html, width=400, height=180)
      location = [df0['latitude'].iloc[i], df0['longitude'].iloc[i]]
      popup = folium.Popup(iframe, parse_html=True, max_width=1000)
      icon = folium.Icon(color='red', icon='home')
      folium.Marker(location=location, popup=popup, icon=icon).add_to(m)
  m`

But It doesn't appear the pictures I need into the html folium popup. What am I doing wrong? anyone could help me, please?