Leaflet: image not found when using addControl( html = "<img src =' source'>"

[sl4269]

When I inspect the image file it says the image is not found. However ever when I check the folder the image is there and shows when I preview it. The code is rather long so here are screen shots of where I am having the problem. The code below includes the data used for the screen shots

```{r}
library(tidyverse)
library(tigris)
library(leaflet)
library(tidycensus)
library(dplyr)
library(magrittr)
library(sf)
library(ggplot2)
library(leaflet)
library(leaflet.extras)
library(htmlwidgets)
library(htmltools)

#

DATA

#

################ census data with Covid-19 data

census_data <- read_csv(https://raw.githubusercontent.com/sl4269/Covid-19-Spatial-Analysis/master/Covid-19_NYC/covid_census.csv)

################# NYC zipcodes

zips <- read_csv(https://raw.githubusercontent.com/sl4269/Covid-19-Spatial-Analysis/master/Covid-19_NYC/NYCzips.csv)

############## NYCshapeFile

nycshape <- zctas(cb = T, starts_with = c(zips$zips))

############ merging shapefile with data

zipsmap <- geo_join(nycshape,
covCen,
by_sp = "GEOID10",
by_df = "GEOID",
how = "inner")

#

Leaflet plot

#

## palettes and labels, and legend creation

nhBLack<- covCen %>%
pull(nhblack_pct)

get values for lower & upper "Pew breaks"

nhBLack_lower <- ((2/3) * nhBLack)
nhBLack_upper <- (2 * nhBLack)

pal_BLack <- colorBin(
palette = c("#EDEDED", "#FF94C0", "#FF2C54"),
domain = zipsmap$nhblack_pct,
bins = c(0, nhBLack_lower, nhBLack_upper, max(zipsmap$nhblack_pct, na.rm = T))
)

nhHisp<- covCen %>%
pull(hispanic_pct)

get values for lower & upper "Pew breaks"

nhHisp_lower <- ((2/3) * nhHisp)
nhHisp_upper <- (2 * nhHisp)

pal_Hisp <- colorBin(
palette = c("#EDEDED", "#FF94C0", "#FF2C54"),
domain = zipsmap$hispanic_pct,
bins = c(0, nhHisp_lower, nhHisp_upper, max(zipsmap$hispanic_pct, na.rm = T))
)

pal_rate <- colorQuantile(
palette = c("#EDEDED", "#94C6E7", "#4CB1DF"),
domain = zipsmap$case_rate,
probs = seq(0, 1, length.out = 4)
)

labels <-
paste0(
"Zip Code: ",
zipsmap@data$GEOID10, "
",
"% Non Hispanic Black: ",
zipsmap@data$nhblack_pct, "
",
"% Hispanic: ",
zipsmap@data$hispanic_pct, "
",
"Case rate: ",
zipsmap@data$case_rate) %>%
lapply(htmltools::HTML)

labs <- lapply(seq(nrow(zipsmap)), function(i) {
paste0(
"Non Hispanic Black: %",
round(zipsmap@data[i, "nhblack_pct"], 0), "
",
"Hispanic: %",
round(zipsmap@data[i, "hispanic_pct"], 0), "
",
"Case rate: ", round(zipsmap@data[i, "case_rate"], 3)
)
})

legend_scale <- data.frame(
race_ethnicity = c(rep(1, 3), rep(2, 3), rep(3, 3)),
case_rate = c(rep(seq(1, 3, 1), 3)),
color = c("#F1F1F1", "#C3DEEE", "#A1D3EA",
"#F7DBE7", "#CAC8E3", "#A6BDDF",
"#F7C1CB", "#CAAEC8", "#A6A3C4")
)

legend

legend <- ggplot() +
geom_tile(
data = legend_scale,
aes(x = race_ethnicity, y = case_rate, fill = color)
) +
scale_fill_identity() +
labs(x = "race/ethnicity →",
y = "Case Rate →") +
theme(
axis.title = element_text(size = 20),
axis.line = element_blank(),
axis.text = element_blank(),
axis.ticks = element_blank(),
panel.grid = element_blank(),
panel.background = element_blank(),
plot.margin = margin(10, 10, 10, 10),
plot.background = element_rect(fill = "transparent", color = NA)
)

install.packages("svglite")

library(svglite)

save SVG legend

ggsave("Covid-19_NYC/img/zipsmap_race_caserate.png", plot = legend,
width = 3, height = 3, bg = "transparent")

########### map

zipsmap %>%
leaflet(
width = "100%",
options = leafletOptions(zoomSnap = 0.25, zoomDelta = 0.5)
) %>%
# add base map
addProviderTiles("CartoDB") %>%
# add zip codes
addPolygons(group = "Black Race",
fillColor = ~pal_BLack(x = race_nhBlack),
fillOpacity = 0.5,
stroke = F,
smoothFactor = 0.2) %>%
addPolygons(group = "Hisp Race",
fillColor = ~pal_Hisp(x = race_hisp),
fillOpacity = 0.5,
stroke = F,
smoothFactor = 0.2) %>%
addPolygons(group = "Case Rate",
fillColor = ~pal_rate(case_rate),
fillOpacity = 0.5,
stroke = F,
smoothFactor = 0.2) %>%

addLayersControl(
baseGroups = c("Black Race", "Hisp Race"),
options = layersControlOptions(collapsed = FALSE),
position = "topright"
) %>%

htmlwidgets::onRender("
function(el, x) {
this.on('baselayerchange', function(e) {
e.layer.bringToBack();
})

}

"
) %>%

addPolygons(
label = lapply(labs, htmltools::HTML),
labelOptions = labelOptions(textsize = "12px"),
fillColor = NA,
fillOpacity = 0,
color = "gray",
weight = 1,
opacity = 1,
highlightOptions = highlightOptions(weight = 2)) %>%

addResetMapButton() %>%

addFullscreenControl() %>%

suspendScroll(sleepNote = F, sleepOpacity = 1) %>%

addControl(
html = "",
position = "topright",
className = "legend-bivar"
)

```

[schloerke]

Need to use a file protocol within browsers to access a local file.

file:///Users/stevenlawrence/Desktop/cumc_github/Covid-19/Covid-19_NYC/img/zipsmap_race_caserate.png

(Would be better if the path was a relative path. But this may not be possible until hosted by shiny.)

[sl4269]

Thank you for the quick reply.

I agree!

This has solved by initial problem but now I am getting this error which is great because at least its seeing the file. So now I need to some how allow my browser to allow this.

[schloerke]

Ah, you already have it as a shiny application.

Use a relative path and put the image in the www of your Shiny application directory. That will be the only way you can load file path like a relative image path.

Folder structure

app.R
www
  |- img
    |- zipsmap_race_caserate.png

Leaflet code

#...
addControl(
    html = "<img src = 'img/zipsmap_race_caserate.png', width = '100', height = '100'>",
    position = "topright",
    className = "legend-bivar"
  )

[sl4269]

Thank you! The problem has been solved. I should also include that it terns out that R also stops one from accessing files in this particular way so I had to upload my image to a website I am hosting on github and then copy the image address from the page its on then it worked completely.

leaflet code
```{r}

...

addControl(
html = "",
position = "topright",
className = "legend-bivar"
)
```
I am not sure why but now I know that having an image already hosted on another site somehow helps shiny recognize it because R won't let you access it locally for some reason.

A big thank you!