title: Post local image into a popup using leaflet and R
body: <p>I've been trying like crazy to add local images (as in image files in my computer) into my leaflet map using R. I have plotted around 500 coordinates analyzing some images and I wish to show that specific image when clicking (popup). </p>
  
  <pre><code>leaflet(pics) %&gt;%
    addTiles() %&gt;%
    addCircleMarkers(
      fillOpacity = 0.8, radius = 5,
      lng = ~GPSLongitude, lat =~GPSLatitude, 
      color = ~pal(Married),
      popup = ~SourceFile, # WISH TO ADD EMBEDDED LOCAL IMAGE IN HERE
      label = mapply(function(x, y) {
        HTML(sprintf("&lt;em&gt;%s&lt;/em&gt;&lt;/br&gt; %s", htmlEscape(x), htmlEscape(y)))},
        pics$Address, pics$DateTimeOriginal, SIMPLIFY = F),
      labelOptions = lapply(1:nrow(pics), function(x) {
        labelOptions(direction='auto')
      }))
  </code></pre>
  
  <p>I am attaching 2 screenshots: one hovering the mouse and the other one clicking on a specific place. Ideally, I'd wish to show the image and the image file name when I click on each one. Is that possible?</p>
  
  <p><a href="https://i.stack.imgur.com/2AGP6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2AGP6.png" alt="Hover"></a>
  <a href="https://i.stack.imgur.com/bf9Fp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bf9Fp.png" alt="Clic"></a></p>
  
  <p>I can also show you an RPub with the example: <a href="http://rpubs.com/laresbernardo/photomap" rel="nofollow noreferrer">http://rpubs.com/laresbernardo/photomap</a></p>
  
  <p>Hope you can help me. Thanks!</p>
  
  <p><strong>_________________________ UPDATE _________________________</strong></p>
  
  <p>All code used for this example. Basically I scan for all images with geotags, bring the address to add on a label and then plot all coordinates. When I click on a coordinate I wish to see that picture.</p>
  
  <pre><code>wd &lt;- "/Users/bernardo/Dropbox (Personal)/Documentos/R/R Mapping/GPS Photos"
  
  # ------------------------------------------- get the pics with geotags
  
  library(exifr)
  library(dplyr)
  library(lubridate)
  library(beepr)
  library(maps)
  
  time &lt;- Sys.time(); print(time)
  setwd("/Users/bernardo/Dropbox (Personal)/Imágenes")
  files &lt;- list.files(pattern = "*.jpg|*.JPG|*.png|*.PNG", recursive=T)
  exif &lt;- read_exif(files, tags = c("SourceFile", "DateTimeOriginal", "GPSLongitude", "GPSLatitude"))
  pics &lt;- exif %&gt;% filter(!is.na(GPSLongitude)) %&gt;%
    mutate(DateTimeOriginal = ymd_hms(DateTimeOriginal))
  pics$Owner &lt;- ifelse(grepl("iPhone Maru", pics$SourceFile), "Maru", "Ber")
  pics$Married &lt;- ifelse(as.Date(pics$DateTimeOriginal) &gt;= '2016-04-30', TRUE, FALSE)
  pics$Country &lt;- maps::map.where(database="world", pics$GPSLongitude, pics$GPSLatitude)
  
  #lares::freqs(pics %&gt;% filter(!is.na(Country)), Country)
  
  # Save pics with geotags
  setwd(wd)
  write.csv(pics, "with_geotags.csv", row.names = F)
  print(Sys.time() - time)
  beepr::beep()
  
  
  # ------------------------------------------- get the addresses from files
  
  # GET ALL ADDRESSES
  library(ggmap)
  options(warn=-1)
  setwd(wd)
  
  pics &lt;- read.csv("with_geotags.csv")
  addresses &lt;- read.csv("with_address.csv")
  
  pics_to_search &lt;- pics %&gt;% filter(!SourceFile %in% addresses$SourceFile)
  print(paste0("Without address: ",round(100 * nrow(pics_to_search)/nrow(pics), 2),"% | ", nrow(pics_to_search)))
  
  out &lt;- data.frame()
  for (i in 1:nrow(pics_to_search)) {
    Address &lt;- revgeocode(cbind(pics_to_search$GPSLongitude, pics_to_search$GPSLatitude)[i,], output="address")[1]
    if (!is.na(Address)) {
      out &lt;- rbind(out, cbind(SourceFile=as.character(pics_to_search$SourceFile[i]), Address))
      print(paste(i, Address, sep=" - ")) 
    }
  }
  # Save pics with geotags
  pics_with_address &lt;- rbind(out, addresses)
  write.csv(pics_with_address, "with_address.csv", row.names = F)
  
  
  # ------------------------------------------- Map all coordinates with leaflet
  
  setwd(wd)
  
  library(leaflet)
  library(htmltools)
  library(mapview)
  
  pics &lt;- read.csv("with_geotags.csv")
  address &lt;- read.csv("with_address.csv")
  
  pal &lt;- colorFactor(c("green4", "navy"), domain = c(FALSE, TRUE))
  pics &lt;- left_join(pics, address, by=c("SourceFile"))
  pics$Content &lt;- paste("Dirección:","&lt;em&gt;", pics$Address,"&lt;/em&gt;", "&lt;br/&gt; Fecha:", as.Date(pics$DateTimeOriginal))
  
  leaflet(pics) %&gt;%
    addTiles() %&gt;%
    addCircleMarkers(
      fillOpacity = 0.8, radius = 5,
      lng = ~GPSLongitude, lat =~GPSLatitude, 
      color = ~pal(Married),
      popup = popupImage(as.character(pics$SourceFile), src = "local"),
      label = mapply(function(x, y) {
        HTML(sprintf("&lt;em&gt;%s&lt;/em&gt;&lt;/br&gt; %s", htmlEscape(x), htmlEscape(y)))},
        pics$Address, pics$DateTimeOriginal, SIMPLIFY = F),
      labelOptions = lapply(1:nrow(pics), function(x) {
        labelOptions(direction='auto')
      }))
  </code></pre>
  
  <p>But...
  <a href="https://i.stack.imgur.com/hh3ha.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hh3ha.png" alt="Error in image"></a></p>
  
  <p>I even installed the latest version with <code>devtools::install_github("r-spatial/mapview@develop")</code></p>