Image

This component renders an image. A flexible template image can only be sent by using a URL.

Request {#image-request-parameter}

Parameter	Type	Required	Description
type	string	Y	Set this parameter to `image`.
url	string	Y	Image URL (PNG format recommended, HTTPS only). Maximum size: 1 MB Maximum length: 1,000 characters
flex	number	N	The proportion of the width or height of the component within the parent component. For more information, see Width and height of components.
margin	string	N	The minimum space between the component and the previous component in the parent component. For more information, see margin.
position	string	N	The reference point for the `offsetTop`, `offsetBottom`, `offsetStart`, and `offsetEnd` properties. Specify one of the following values: • `relative`: Uses the previous box as the reference point. • `absolute`: Uses the upper left corner of the parent component as the reference point. The default value is `relative`. For more information, see Offset.
offsetTop	string	N	Top offset. For more information, see Offset.
offsetBottom	string	N	Bottom offset For more information, see Offset.
offsetStart	string	N	Left offset. For more information, see Offset.
offsetEnd	string	N	Right offset. For more information, see Offset.
align	string	N	Horizontal alignment. For more information, see Horizontal alignment.
gravity	string	N	Vertical alignment. For more information, see Vertical alignment.
size	string	N	Maximum width of the image. Specify one of the following values: `xxs`, `xs`, `sm`, `md`, `lg`, `xl`, `xxl`, `3xl`, `4xl`, `5xl`, and `full`. The image width increases in the order the values are listed. The default value is `md`.
aspectRatio	string	N	Aspect ratio. Enter a value in `{width}:{height}` format. Specify the `{width}` and `{height}` values between 1 and 10,000. Note that the `{height}` cannot exceed three times the `{width}`. The default value is `1:1`.
aspectMode	string	N	How the image is displayed when the aspect ratio of the image and the value specified for the `aspectRatio` property do not match. For more information, see "Image rendering area" below.
action	object	N	The action that occurs when the image is tapped. Specify an action object.

Image rendering area {#rendering-area}

You can define the area where an image is rendered by specifying the maximum width of the image in the size property and the aspect ratio of the image in the aspectRatio property. The area specified by the size and aspectRatio properties is called the image rendering area.

If the width of the image component specified by the flex property is smaller than the width of the image component calculated by the size property, the width of the image rendering area is also reduced.
If the aspect ratio of an image does not match the value specified for the aspectRatio property, the image is displayed according to the aspectMode property. The default value is fit.
- If aspectMode is cover: Resizes the image to cover the entire area. The part of the image that does not fit the area is not displayed.
- If aspectMode is fit: Resizes the image to make sure the image is fully visible. A vertically long image is displayed with blank space on the sides, while a horizontally long image has blank space above and below.

Request example {#image-request-example}

{  "type": "bubble",  "body": {    "type": "box",    "layout": "horizontal",    "contents": [      {        "type": "image",        "url": "https://developers.worksmobile.com/image/en/bot/message_type/NAVERWORKS.png",        "size": "full",        "aspectRatio": "2:1"      }    ]  }}