Local images displayed in DT not being written to _site directory

[n8craig]

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.

Context

I am working in a Quarto website building a searchable interface for a museum inventory.

I have a large number of artifact 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, images that are 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

[n8craig]

I posted this as a question on StackOverflow. Can someone delete the question from here as I didn't see an option to do so. Thanks.