如何在Shiny的modalDialog模态框中插入本地图片？

Shiny运行在浏览器环境中，浏览器默认禁止直接读取本地绝对文件路径，需要通过Shiny的静态资源服务加载本地图片，有两种常用实现方案：

方案1：使用www目录（推荐，最简） #

• 在你的Shiny应用根目录（和app.R/ui、server代码文件同目录）新建名为www的文件夹，将需要加载的图片放入该文件夹，可按需创建子目录，比如你提到的图片可以存放为www/images/image1.png
• 修改模态框代码，直接使用www目录下的相对路径拼接img标签即可，示例代码：

observeEvent(input$execute, {
  showModal(modalDialog(
    title = "Title",
    # 路径直接写www目录下的相对路径，不需要加www前缀
    HTML('<img src="images/image1.png">'),
    easyClose = TRUE,
    footer = NULL
  ))
})

actionButton(inputId = "execute", label = "Click")

方案2：自定义资源路径（无需移动图片到www目录） #

如果不想把图片移动到www目录，可以用addResourcePath函数注册本地目录为Shiny的静态资源映射路径，示例代码：

# 先在server函数最开头注册路径，第一个参数是自定义的映射前缀，第二个参数是本地文件夹的绝对路径
addResourcePath("my_img", "~/Documents/folder/images")

observeEvent(input$execute, {
  showModal(modalDialog(
    title = "Title",
    # 路径写法为 映射前缀/文件名
    HTML('<img src="my_img/image1.png">'),
    easyClose = TRUE,
    footer = NULL
  ))
})

actionButton(inputId = "execute", label = "Click")

扩展：封装简化调用 #

如果希望接近你示例中的直接传路径的写法，可以自行封装简单函数：

# 封装加载本地图片的函数
localImg <- function(path, width = NULL, height = NULL) {
  HTML(sprintf('<img src="%s" width="%s" height="%s">', path, width, height))
}

# 调用时代码更简洁
observeEvent(input$execute, {
  showModal(modalDialog(
    title = "Title",
    localImg("my_img/image1.png"),
    easyClose = TRUE,
    footer = NULL
  ))
})

注意事项 #

Windows系统下本地路径如果使用反斜杠需要转义，推荐统一使用正斜杠写路径；如果应用需要部署到服务器，要确保服务器上对应图片路径存在、读取权限正常。

内容的提问来源于stack exchange，提问作者neves