crosstalk static image display

[abiyug]

I want be able to display corresponding static image stored in a column of a data frame in flex dashboard with crosstalk filters. On the example bellow I want a giraff.png to show when girfaffe filter is selected on Chart B, and moneky.png when monkey input is selected and so forth.

Here is minimal reprex example.

---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
---

```{r setup, include=FALSE}
library(flexdashboard)
library(plotly)
library(dplyr)
library(crosstalk)

Animals <- c("giraffes", "orangutangs", "monkeys")
SF_Zoo <- c(20, 14, 23)
LA_Zoo <- c(12, 18, 29)
DC_Zoo <- c(6, 14, 25)
img <- c("fig/giraffe.png", "fig/orangutang.png","fig/monkey.png")
data <- data.frame(Animals, SF_Zoo, LA_Zoo, DC_Zoo, img)

sd2 <- SharedData$new(data)

Inputs {.sidebar}

# Multiple selector

# Multiple selector
filter_select(id = "Animals", 
             label = "Choose animal", 
             sharedData = sd2, 
             group = ~Animals,
             multiple = TRUE#,
             #selected = "monkeys"
             )

Column {data-width=650}

Chart A

plot_ly(data = sd2, x = ~Animals) %>%
    add_trace(y = ~SF_Zoo, name = 'SF Zoo', text = ~SF_Zoo, textposition = 'auto', marker = list(line = list(color = 'black', width = 1.5))) %>%
    add_trace(y = ~LA_Zoo, name = 'LA Zoo', text = ~LA_Zoo, textposition = 'auto', marker = list(line = list(color = 'black', width = 1.5))) %>%
    add_trace(y = ~DC_Zoo, name = 'DC Zoo', text = ~DC_Zoo, textposition = 'auto', marker = list(line = list(color = 'black', width = 1.5))) %>%
    layout(yaxis = list(title = 'Count'), 
         barmode = 'group')

Column {data-width=350}

Chart B

knitr::include_graphics("fig/giraffe.png")

[abiyug]

Can anyone take a look?

[cpsievert]

I don't think will be possible using plotly+crosstalk alone. This would be easiest if you're willing to use shiny, but you could also something like this if you want it to work purely client-side https://plotly-r.com/supplying-custom-data.html#fig:tooltip-image

[abiyug]

I was thinking it should be possible in flexdash/crosstalk just like it can in shiny. I read some where a terrillescopjs can allow this feature. That said,
where can I find the "tooltip-image.js" I want to give it a try..