how to adjust unwanted filling produced by resized renderImage?

[EvoNerd]

Hello, I'm new to the community.

I'm trying to render a re-sized image with some text underneath in the same card. My problem is that I have unwanted vertical whitespace between these two items. It seems like renderImage is shrinking the image without shrinking down the space it leaves around the image...

How can I get rid of this vertical whitespace?
I suspect the issue is with renderImage producing a non-fillable element but I haven't managed to solve the problem.

Does anyone have any ideas that would not involve me resizing the images manually?

Thank you!

# a minimal example of my issues

library(shiny) # for app
library(bslib) # for most recent recommended UI options
library(lorem) # for placeholder text

app_theme <- bs_theme(bg="ivory", fg = "#222222")

# user interface
ui <- fluidPage(
  
  # colour in the background to illustrate the issue
  theme = app_theme,
  
  # a card
  card(card_header("A card"),
       imageOutput("plot_schematic"),
       card_body(lorem::ipsum(paragraphs = 1))
  )
)

# Server logic
server <- function(input, output) {
  output$plot_schematic <- renderImage({
    list(
      src = file.path("sad_puppy.png"),
      contentType = "image/png",
      height = 100,
      width = 242
    )
  }, deleteFile = FALSE)
}

# Complete app with UI and server components
shinyApp(ui, server)

[Simon_Smart]

imageOutput has a default height of 400px. If you set it to auto instead, I think it solves your problem:

imageOutput("plot_schematic", height = "auto")