核心问题排查 #

你的图片无法加载的直接原因是列名大小写不匹配：在Server端过滤图片时，你写的是filter(Playername %in% input$Playernameinput)，但你的数据框列名是PlayerName（首字母大写N），这导致过滤结果为空，PlayerImage没有拿到有效URL，所以显示问号。

另外你的代码存在重复过滤冗余：分别过滤两次数据框来获取职位和图片，完全可以合并成一次操作，提升代码效率和可读性。

修正&优化后的完整代码 #

以下是修复图片加载问题并优化后的完整可运行代码：

library(shiny)
library(shinydashboardPlus)
library(dplyr)

# 定义数据框
PlayerName <- c("Alexander Ovechkin", "Sidney Crosby")
Position <- c("Forward", "Forward")
ImageURL <- c("https://cms.nhl.bamgrid.com/images/headshots/current/168x168/8471214.jpg", 
              "https://cms.nhl.bamgrid.com/images/headshots/current/168x168/8471675.jpg")
DF <- data.frame(PlayerName, Position, ImageURL, stringsAsFactors = FALSE)

# UI部分
ui <- navbarPage(
  title = "Player Dashboard",
  tabPanel(
    title = "HOME",
    icon = icon("Home"),
    fluidPage(
      fluidRow(
        column(
          width = 3,
          h4("Filter Data", align = "center"),
          box(
            collapsible = FALSE, 
            width = 12,
            selectInput(
              "Playernameinput", 
              "Select Player", 
              choices = DF$PlayerName
            )
          )
        ),
        column(
          width = 9, # 调整宽度让userBox显示更合理
          h4("Selected Athlete", align = "center"),
          uiOutput("SelectedAthletePlaceHolder")
        )
      )
    )
  )
)

# Server部分
server <- function(session, input, output) {
  # 用reactive表达式缓存选中的运动员数据，避免重复过滤
  selected_player <- reactive({
    req(input$Playernameinput)
    DF %>% 
      filter(PlayerName == input$Playernameinput) %>% 
      slice(1) # 确保只返回一条数据
  })
  
  output$SelectedAthletePlaceHolder <- renderUI({
    req(selected_player()) # 确保数据存在
    player_data <- selected_player()
    
    userBox(
      title = userDescription(
        title = player_data$PlayerName,
        subtitle = player_data$Position,
        type = 2,
        background = "Red",
        image = player_data$ImageURL
      ),
      width = 12
    )
  })
}

shinyApp(ui, server)

关键优化点说明 #

1. 修正列名错误：统一使用PlayerName（大写N）进行过滤，确保能正确获取图片URL。
2. 使用Reactive表达式：selected_player()缓存过滤后的运动员数据，避免在renderUI中重复执行过滤逻辑，提升性能。
3. 调整布局宽度：把右侧列宽度从3改为9，让userBox有足够的显示空间，布局更美观。
4. 数据验证：用req()确保输入和数据存在，避免空值导致的潜在错误。
5. 明确取单条数据：用slice(1)确保过滤结果只有一条，避免多匹配的情况（虽然你的数据里不会出现，但这是良好的编程习惯）。

额外建议 #

• 如果后续数据可能有重复的运动员姓名，可以考虑用运动员ID作为selectInput的choices（值为ID，显示为姓名），这样过滤更精准。
• 可以添加错误处理，比如当选中的运动员没有图片URL时，显示默认图片或提示信息。

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