image

The Image component is used to display images with support for fallback.

Usage

image(...)

Arguments

...

Props to pass to the component. The allowed props are listed below in the Details section.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app.

Details

• src. Type: string. Default: NA.

• srcSet. Type: string. Default: NA.

• sizes. Type: string. Default: NA.

• alt. Type: string. Default: NA.

• width. Type: number. Default: NA.

• height. Type: number. Default: NA.

• radius. Type: none OR sm OR md OR lg OR full. Default: "xl".

• shadow. Type: none OR sm OR md OR lg. Default: "none".

• loading. Type: eager OR lazy. Default: NA.

• fallbackSrc. Type: string. Default: NA.

• isBlurred. Type: boolean. Default: false.

• isZoomed. Type: boolean. Default: false.

• removeWrapper. Type: boolean. Default: false.

• disableSkeleton. Type: boolean. Default: false.

• classNames. Type: Partial<Record<"img" OR "wrapper" OR "zoomedWrapper" OR "blurredImg", string>>. Default: NA.

• onLoad. Type: ReactEventHandler<HTMLImageElement>. Default: NA.

• onError. Type: () => void. Default: NA.

See also

See https://heroui.com/docs/components/image.

Examples

library(shiny)
library(shinyNextUI)
library(shiny.react)

ui <- nextui_page(
  div(
    class = "flex gap-5 my-2",
    image(
      width = 300,
      alt = "NextUI hero Image",
      src = "https://heroui.com/images/hero-card-complete.jpeg"
    ),
    image(
      isBlurred = TRUE,
      width = 300,
      alt = "Album cover",
      src = "https://heroui.com/images/hero-card-complete.jpeg"
    ),
    image(
      isZoomed = TRUE,
      width = 300,
      alt = "Fruit image with zoom effect",
      src = "https://heroui.com/images/hero-card-complete.jpeg"
    )
  )
)

server <- function(input, output, session) {
}

if (interactive() || is_testing()) shinyApp(ui, server)