Bixby Developer Center

Standalone image within a component. Images are specified by url, and can be given alternate URLs to use with the UI's light-theme or dark-theme when separate images are needed to stand out against light or dark backgrounds.

Interactive Demo

Child Keys

aspect-ratio optional	Determines the standalone image's aspect ratio
background-color optional	Determines the background color of an image
float-allowed optional	Boolean
lightbox-enabled optional	Boolean that determines if an image goes to lightbox mode when a user taps it
object-fit optional	Determines how an image fits within a Bixby Views component
object-position optional	Determines the positioning alignment of an image within a Bixby Views component
url optional	URL of the image

Examples

image ("#{value(myUrl)}")

result-view {
  match {
    Hotel (this) {
      from-output: ShowHotelImage
    }
  }

  message ("Here is an image:")

  render {
    layout {
      section {
        content {
          image {
            url ("[#{value(this.images[0].url)}]")
            aspect-ratio (16:9)
            object-fit (Contain)
          }
        }
      }
    }
  }
}

View master on GitHub

You can run the sample capsule in the Simulator to see how this component displays on different devices, if supported.