Image

Image.

Size

The image is displayed according to its own dimensions, provided there is enough space in the containing block's width. Otherwise, the image is constrained by the width of the containing block. The proportions of the image are preserved unless stated otherwise.

The size of the image is specified in logical pixels, not in physical device pixels. In cases where maximum display quality on high pixel density devices is important, it is advisable to have the original image size at three times the resolution of the displayed size.

Properties

src: string | { url, width?, height?}

Parameters for the original image. A string with the source URL or an object with the fields:

• url: string A string with the source URL.

• width: number Width of the source. Should be specified along with height. Specifying both width and height prevents potential page jumps during the first load since the actual size of the image is unknown until it starts loading. The specified size may differ from the actual size, and it is this size that is considered for display.

• height: number Height of the source. See width above.

resizeMode: string

Default: cover

Method of placing the image when the display proportions differ from the original.

• cover — The image fits, covering the entire display area. The part of the image that does not fit into the area becomes invisible. Proportions are preserved.

• contain — The image fits entirely, with margins on the sides for missing data. Proportions are preserved.

• stretch — The image stretches to the edges of the area. Proportions are ignored.

style

Modification of the appearance, layout, and geometry of the block.

• width, maxWidth, minWidth
  Width of the block. More details.

• height, maxHeight, minHeight
  Height of the block. More details.

• margin, marginHorizontal, marginVertical, marginTop, marginRight, marginBottom, marginLeft
  External margins of the block. More details.

• position
  Positioning method of the block: relative or absolute. More details.

• top, right, bottom, left
  Offset from the original position. More details.

• border
  Setting borders for the block on all four sides: thickness, style, and color. More details.

• borderTop, borderRight, borderBottom, borderLeft
  Setting individual borders for the sides of the block: thickness and color. More details.

• borderRadius, borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, borderTopRightRadius
  Rounding the corners of the borders. More details.

• borderWidth, borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth
  Thickness of the borders. More details.

• borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor
  Color of the borders. More details.

• backgroundColor
  Background color of the block. More details.

• backgroundGradient
  Background gradient of the block. More details.

• opacity
  Opacity of the entire block with its content. More details.

• elevation
  Shadow height. More details.

• shadowColor
  Color of the block's shadow. More details.

• flexBasis
  Initial size of the block along the main axis of the container. More details.

• flexGrow
  Growth factor of the block along the main axis of the container. More details.

• flexShrink
  Shrinkage factor of the block along the main axis of the container. More details.

• flex
  Defines the behavior of the block's size (growth, shrinkage, and initial size) along the main axis of the container. More details.

• alignSelf
  Alignment of a specific block across the main axis of the container. More details.

• transform
  Transformation of the geometry of blocks and containers in 2D and 3D space. More details.

Examples

---

An image with a width of 300 pixels is smaller than the containing block of 350.

---

An image with a width of 450 pixels is larger than the containing block of 350. It is constrained by the width of the block. The proportions of the image are preserved.

---

An image specifying the dimensions of the source to prevent page jumping during the first load. See src.width in the description of parameters above.

---

An image specifying a relative display width. The height is calculated while preserving proportions based on the sizes specified when indicating the source. If the source dimensions are not specified, the proportions are calculated from the actual dimensions of the image. In such a case, a page jump may occur upon first opening: see src.width in the description of parameters above.

---

A landscape image in portrait dimensions. Scaling method cover (default). The image fits, covering the entire display area. The part of the image that does not fit into the area becomes invisible. Proportions are preserved.

---

A landscape image in portrait dimensions. Scaling method contain. The image fits entirely, with margins on the sides for missing data. Proportions are preserved.

---

A landscape image in portrait dimensions. Scaling method stretch. The image stretches to the edges of the area. Proportions are ignored.