Question
How can I get each local image that is only referenced in a DT
call to render to the _site
directory so that it shows up in the site? Any suggestions or guidance would be much appreciated.
I reviewed this and this SO question.
Context
I am working in a Quarto website, but I get similar results from R Markdown.
I have a large number of image files in a series of sub-directories. These files correspond to records in a data frame (location, material, etc). Using the DT
library, I would like to display the table and include the image files.
Problem
After rendering the website, local images only referenced within the DT
call are not written out to the _site
directory. However, if I reference an image using html
that I pull directly from a data frame cell (i.e. df$imagefile[1]
), the image is written to the _site
directory and thus shows both in the html
and the DT
.
Without
html
chunk.
With
html
chunk.
Repro
- Create a new Quarto website and add the code below to the index.qmd file.
- First render the document without the final
html
chunk and no images will show. - Delete the
_site
directory and restart R. - Re-render the document including the
html
chunk and the first table image will show along with another copy below the table.
Note, sometimes once an image is knit is seems to remain in memory even if deleted. I've found it useful to both delete _site
and restart R.
#| echo: false
knitr::opts_chunk$set(
echo = FALSE,
message = FALSE
)
#| label: libraries
library(dplyr)
library(DT)
#| label: create-dirs
main_dir <- here::here()
sub_dir <- "data"
sub_dir2 <- "data/Images"
# Check first dir
if (file.exists(sub_dir)){
} else {
dir.create(file.path(main_dir, sub_dir))
}
# Check second dir
if (file.exists(sub_dir2)){
} else {
dir.create(file.path(main_dir, sub_dir2))
}
#| label: make-images
jpeg(filename = "data/Images/2347.jpg")
plot(rnorm(25))
jpeg(filename = "data/Images/2348.jpg")
plot(rnorm(25))
jpeg(filename = "data/Images/2349.jpg")
plot(rnorm(25))
dev.off()
#| label: generate-list-make-df
image_list <- list.files("data/Images", full.names = TRUE)
df <- data.frame(imagefile = image_list)
df <- df |>
mutate(imagefile = paste0("<a href='",
imagefile,
"' target = 'blank'>",
"<img src='",
imagefile,
"' width = '125'></a></img>"))
datatable(df, escape = FALSE)
Final html
chunk
Render first without and then again with the following chunk.
<a href='/data/Images/2347.jpg' target = 'blank'><img src='/data/Images/2347.jpg' width = '125'></a></img>
Session Info
R version 4.2.1 (2022-06-23 ucrt) Platform: x86_64-w64-mingw32/x64 (64-bit) Running under: Windows 10 x64 (build 19044)
Matrix products: default
locale:
1 LC_COLLATE=English_United States.utf8 LC_CTYPE=English_United States.utf8
[3] LC_MONETARY=English_United States.utf8 LC_NUMERIC=C
[5] LC_TIME=English_United States.utf8
attached base packages: 1 stats graphics grDevices datasets utils methods base
loaded via a namespace (and not attached):
1 compiler_4.2.1 here_1.0.1 fastmap_1.1.0 cli_3.4.1 rprojroot_2.0.3 htmltools_0.5.2 tools_4.2.1
[8] yaml_2.3.6 rmarkdown_2.17 knitr_1.40 xfun_0.33 digest_0.6.30 rlang_1.0.6 renv_0.15.5
[15] evaluate_0.16