image {shinyNextUI} | R Documentation |
image
Description
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. |
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
.
Value
An object of class shiny.tag
containing the
necessary configuration and including options such as JavaScript
dependencies to instantiate a HeroUI image component.
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)