Изображение поповер для kable - Flexdashboard/Rmarkdown
У меня есть таблица, которая отображает изображения и метрики, соответствующие этим изображениям. Я хочу отобразить изображения небольшого размера (чтобы таблица была компактной), а затем использовать функцию всплывающего окна, чтобы навести курсор на изображение и отобразить его в большем размере.
Я использую kableExtra, и я не могу заставить всплывающее окно отображать изображение, только текст, показывающий тег img.
Вот воспроизводимый пример того, что я сделал. Любые советы / помощь, чтобы исправить это, будут оценены!
---
title: "Table Sample"
output:
flexdashboard::flex_dashboard:
orientation: rows
---
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover({ html: true });
});
</script>
<style>
img {
max-width: 75px;
}
</style>
``` {r global, include = FALSE}
library(tidyverse)
library(flexdashboard)
library(kableExtra)
```
IMAGES
===========================================================================
``` {r}
dt <- data.frame(rank = c(1, 2, 3, 4, 5), image_url =
c('https://images.unsplash.com/photo-1521671413015-ce2b0103c8c7?ixlib=rb-0.3.5&s=45547f67f01ffdcad0e33c8417b840a9&auto=format&fit=crop&w=667&q=80', "https://images.unsplash.com/photo-1520699697851-3dc68aa3a474?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ef15aee8bcb3f5928e5b31347adb6173&auto=format&fit=crop&w=400&q=80", "https://images.unsplash.com/photo-1501925873391-c3cd73416c5b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=379e4a0fffc6d11cd5794806681d0211&auto=format&fit=crop&w=750&q=80", "https://images.unsplash.com/photo-1493019352063-500af484329e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f1e0ce442afdcaf2cdc4fde83012346e&auto=format&fit=crop&w=750&q=80", "https://images.unsplash.com/photo-1422056551295-3b38e8a20462?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3eb1f67f2b9c1c26435fc584a0a1f75d&auto=format&fit=crop&w=667&q=80"))
img_dt <- dt %>%
mutate(img = paste0("![](", image_url, ")"), popover = paste0("<img src='", image_url, "'/>"))
img_dt$img <- cell_spec(img_dt$img, popover = spec_popover(content = img_dt$popover, title = NULL, trigger = "hover", position = "right"))
img_dt <- img_dt %>% select(rank, img)
knitr::kable(img_dt, escape = FALSE) %>%
kable_styling("striped", full_width = FALSE)
```
Ссылка на изображение с выводом, который я получаю: https://drive.google.com/open?id=1-TC7xijzG04HP8a-v4mYWFRbQrFSmJAr