Using images for "symbol" in eCharts4r

I am attempting to use the "image" option for the symbol parameter for a tree chart in eCharts4r. I have run into incredible difficulty trying to achieve this; I've attempted at least four methods, so far. The goal is for each node in the tree to have its own image, rather than a universally used one.

Even attempting that, however, has resulted into a weird white film/filter covering the rendering of the tree (I can provide pictures if helpful).

Code Chunk 1: Libraries

Code Chunk 2: Reproducible Data

Code Chunk 3: Data-nesting Function Used to Transform Data

Code Chunk 4: The echarts4r function. I have tried three different methods for rendering the symbol. "image://" seems to be a required prefix, per documentation and websites. Most of the time the render ends up being a light-blue rectangle instead of an image.

library(tidyverse)
library(echarts4r)
library(flexdashboard)

tree_data <- data.frame(
      name = c("John Jay", "John Rutledge", "William Cushing", "James Wilson", "John Blair", "James Iredell", "Thomas Johnson", "William Paterson", "Samuel Chase", "Oliver Ellsworth", "Bushrod Washington", "Alfred Moore", "John Marshall", "William Johnson", "John McLean", "Levi Woodbery", "William Strong"),
      big = c(NA, "John Jay", "John Jay", "William Cushing", "William Cushing", "John Rutledge", "John Rutledge", "John Rutledge", "John Jay", "Samuel Chase", "James Iredell", "William Cushing", "John Blair", "Bushrod Washington", "Bushrod Washington", "John McLean", "William Johnson"),
      pledgeClass = c("Founder","A", "A", "B", "B", "B", "B", "B", "B", "C", "C", "C", "C", "D", "D", "E", "E"),
      alumniStatus = c(TRUE, TRUE, TRUE, TRUE, FALSE, TRUE, FALSE, TRUE, TRUE, TRUE, FALSE, TRUE, TRUE, TRUE, TRUE, TRUE, TRUE),
      symbolIcon = c("image://https://upload.wikimedia.org/wikipedia/commons/7/72/John_Jay_%28Gilbert_Stuart_portrait%29.jpg","image://https://images.squarespace-cdn.com/content/v1/57d1312f29687f39bf5fcd74/50bc8b0c-67f6-4e2d-83f5-e56f255e2a7e/blank_profile_icon.png?format=1500w","image://https://images.squarespace-cdn.com/content/v1/57d1312f29687f39bf5fcd74/50bc8b0c-67f6-4e2d-83f5-e56f255e2a7e/blank_profile_icon.png?format=1500w","image://https://images.squarespace-cdn.com/content/v1/57d1312f29687f39bf5fcd74/50bc8b0c-67f6-4e2d-83f5-e56f255e2a7e/blank_profile_icon.png?format=1500w","image://https://images.squarespace-cdn.com/content/v1/57d1312f29687f39bf5fcd74/50bc8b0c-67f6-4e2d-83f5-e56f255e2a7e/blank_profile_icon.png?format=1500w","image://https://images.squarespace-cdn.com/content/v1/57d1312f29687f39bf5fcd74/50bc8b0c-67f6-4e2d-83f5-e56f255e2a7e/blank_profile_icon.png?format=1500w","image://https://images.squarespace-cdn.com/content/v1/57d1312f29687f39bf5fcd74/50bc8b0c-67f6-4e2d-83f5-e56f255e2a7e/blank_profile_icon.png?format=1500w","image://https://images.squarespace-cdn.com/content/v1/57d1312f29687f39bf5fcd74/50bc8b0c-67f6-4e2d-83f5-e56f255e2a7e/blank_profile_icon.png?format=1500w","image://https://images.squarespace-cdn.com/content/v1/57d1312f29687f39bf5fcd74/50bc8b0c-67f6-4e2d-83f5-e56f255e2a7e/blank_profile_icon.png?format=1500w","image://https://images.squarespace-cdn.com/content/v1/57d1312f29687f39bf5fcd74/50bc8b0c-67f6-4e2d-83f5-e56f255e2a7e/blank_profile_icon.png?format=1500w","image://https://images.squarespace-cdn.com/content/v1/57d1312f29687f39bf5fcd74/50bc8b0c-67f6-4e2d-83f5-e56f255e2a7e/blank_profile_icon.png?format=1500w","image://https://images.squarespace-cdn.com/content/v1/57d1312f29687f39bf5fcd74/50bc8b0c-67f6-4e2d-83f5-e56f255e2a7e/blank_profile_icon.png?format=1500w","image://https://images.squarespace-cdn.com/content/v1/57d1312f29687f39bf5fcd74/50bc8b0c-67f6-4e2d-83f5-e56f255e2a7e/blank_profile_icon.png?format=1500w","image://https://images.squarespace-cdn.com/content/v1/57d1312f29687f39bf5fcd74/50bc8b0c-67f6-4e2d-83f5-e56f255e2a7e/blank_profile_icon.png?format=1500w","image://https://images.squarespace-cdn.com/content/v1/57d1312f29687f39bf5fcd74/50bc8b0c-67f6-4e2d-83f5-e56f255e2a7e/blank_profile_icon.png?format=1500w","image://https://images.squarespace-cdn.com/content/v1/57d1312f29687f39bf5fcd74/50bc8b0c-67f6-4e2d-83f5-e56f255e2a7e/blank_profile_icon.png?format=1500w","image://https://images.squarespace-cdn.com/content/v1/57d1312f29687f39bf5fcd74/50bc8b0c-67f6-4e2d-83f5-e56f255e2a7e/blank_profile_icon.png?format=1500w"))

create_nested_structure <- function(data, big_boy) {
  data %>% 
    filter(big %in% big_boy) -> d
  if (nrow(d) == 0) {
    return(NA)
  } else {
    return(mutate(d, children = map(name, ~create_nested_structure(data, .x))))
  }
}

tree_data_final <- create_nested_structure(tree_data,NA)

tree_data_final %>%
  e_charts() %>% 
  e_tree(initialTreeDepth = -1, #Expands all nodes by default
         layout = "orthogonal",
         orient = "TB",
         symbolSize = 9, #Default is 7
         symbol = tree_data_final$symbolIcon,
         # symbol = symbolIcon,
         # The next two would apply universally, but I was just trying to get it to work while also not producing that white film over the entire render.
         # symbol = "https://images.squarespace-cdn.com/content/v1/57d1312f29687f39bf5fcd74/50bc8b0c-67f6-4e2d-83f5-e56f255e2a7e/blank_profile_icon.png?format=1500w",
         # symbol = "image://D:/[IMAGE PATH]/blank_profile_icon.png",
         roam = TRUE) %>% #Enables the ability of the user to move the tree around and zoom in and out
  e_add_nested("tooltip",big) %>%
  e_tooltip(trigger = "item",
            formatter = htmlwidgets::JS("
      function(params){
        return('<strong>' + params.name + '</strong>' + '<br />Pledge Class: ' + params.data.pledgeClass + '<br />Alumni: ' + params.data.alumniStatus)
      }
    ")

Solution

According to the echarts API documentation you can set different symbols via a callback function:

function(value, params) {
  return(params.data.symbolIcon)
}

Note: I increased the symbol size for illustration and also changed your example data slightly by using the non-blank- profile icon for the last leaf.

library(echarts4r)

tree_data_final |> 
  e_charts() |> 
  e_tree(
    initialTreeDepth = -1, # Expands all nodes by default
    layout = "orthogonal",
    orient = "TB",
    symbolSize = 40,
    symbol = htmlwidgets::JS(
      "function(value, params) {
        return(params.data.symbolIcon)
      }"
    ),
    roam = TRUE
  ) |> 
  e_add_nested("tooltip", big) %>%
  e_tooltip(
    trigger = "item",
    formatter = htmlwidgets::JS("
      function(params){
        return('<strong>' + params.name + '</strong>' + '<br />Pledge Class: ' + params.data.pledgeClass + '<br />Alumni: ' + params.data.alumniStatus)
      }
    ")
  )