如何在R Shiny页面底部居中添加Logo？

以下是修改后的完整代码，解决了Logo不显示和页面切换逻辑冗余的问题：

library(shiny)

ui <- fluidPage(
  tags$head(
    tags$style(HTML("
      body {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        height: 100vh;
        margin: 5px 0;
        background-color: navy;
        position: relative;
      }
      .input-container {
        width: 100%;
        text-align: center;
        background-color: navy;
        padding: 20px;
      }
      .input-container input[type='text'],
      .input-container input[type='number'],
      .input-container .btn {
        width: 100%;
        padding: 15px;
        margin: 5px 0;
        box-sizing: border-box;
        font-size: 18px;
        text-align: center;
        color: navy;
      }
      .input-container .btn {
        margin-top: 20px;
        color: white;
      }
      .details-text {
        color: white;
        font-size: 24px;
        margin-bottom: 15px;
        text-align: center;
        display: inline-block;
      }
      .logo {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 300px;
        height: auto;
      }
    "))
  ),
  titlePanel(" "),
  uiOutput("page"),
  # 将Logo放在主UI层级，所有页面自动继承显示
  tags$img(src = "free_english_logo.png", class = "logo")
)

server <- function(input, output, session) {
  # 用reactiveVal统一管理页面状态，避免重复代码
  current_page <- reactiveVal("page1")
  
  output$page <- renderUI({
    switch(current_page(),
           "page1" = tagList(
             div(class = "input-container",
                 actionButton("startButton", "START", style = "font-size: 50px;")
             )
           ),
           "page2" = tagList(
             div(class = "input-container",
                 tags$p(class = "details-text", "Your Details:"),
                 textInput("name", label = NULL, placeholder = "Name", style = "background-color: lightblue; color: navy;"),
                 textInput("nationality", label = NULL, placeholder = "Nationality", style = "background-color: lightyellow; color: navy;"),
                 textInput("age", label = NULL, value = "", placeholder = "Age", style = "background-color: lightgreen; color: navy;"),
                 textInput("email", label = NULL, placeholder = "Email", style = "background-color: lightgray; color: navy;"),
                 actionButton("nextButton", "NEXT")
             )
           ),
           "page3" = tagList(
             div(class = "input-container",
                 tags$p(class = "details-text", "Teaching level:"),
                 actionButton("basicButton", "Basic", style = "background-color: lightblue; color: navy;"),
                 actionButton("intermediateButton", "Intermediate", style = "background-color: lightyellow; color: navy;"),
                 actionButton("intermediatePlusButton", "Intermediate +", style = "background-color: lightgreen; color: navy;"),
                 actionButton("notSureButton", "Not sure", style = "background-color: lightgray; color: navy;"),
                 actionButton("nextButtonPage3", "NEXT")
             )
           )
    )
  })
  
  observeEvent(input$startButton, {
    current_page("page2")
  })
  
  observeEvent(input$nextButton, {
    current_page("page3")
  })
}

shinyApp(ui, server)

关键修改说明： #

• Logo显示修复：删除了.logo样式里的display: none;属性，同时修正图片路径为src = "free_english_logo.png"（Shiny会自动从项目根目录的www文件夹读取静态资源，无需手动添加www/前缀）。
• 代码结构优化：将Logo元素移到主UI的fluidPage中，无需在每个页面的renderUI里重复定义，确保所有页面底部都会显示Logo。
• 页面状态简化：使用reactiveVal创建current_page变量统一管理页面切换状态，替代原代码中重复的renderUI定义，让逻辑更清晰易维护。

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