Image
이미지(image)를 표시하는 컴포넌트이다. Flexible Template 이미지는 URL로만 전송할 수 있다.
Request {#image-request-parameter}
| 파라미터 | 타입 | 필수 여부 | 설명 |
|---|---|---|---|
| type | string | Y | image 로 고정. |
| url | string | Y | 이미지 URL (PNG 형식 권장, HTTPS만 허용). 최대 크기: 1MB 최대 글자수: 1,000자 |
| flex | number | N | 상위 컴포넌트 내 해당 컴포넌트의 너비 또는 높이의 비율. 자세한 내용은 컴포넌트의 너비 및 높이를 참고한다. |
| margin | string | N | 상위 컴포넌트 내 해당 컴포넌트와 이전 컴포넌트와의 최소 간격. 자세한 내용은 컴포넌트의 margin 속성을 참고한다. |
| position | string | N | offsetTop, offsetBottom, offsetStart, offsetEnd 속성의 기준. 아래 속성값 중 하나를 지정한다:• relative: 이전 박스를 기준점으로 잡는다.• absolute: 상위 컴포넌트의 왼쪽 상단을 기준점으로 잡는다.기본값은 relative 이다. 자세한 내용은 “참고사항” 문서의 오프셋을 참고한다. |
| offsetTop | string | N | 상단 오프셋. 자세한 내용은 오프셋을 참고한다. |
| offsetBottom | string | N | 하단 오프셋. 자세한 내용은 오프셋을 참고한다. |
| offsetStart | string | N | 왼쪽 오프셋. 자세한 내용은 오프셋을 참고한다. |
| offsetEnd | string | N | 오른쪽 오프셋. 자세한 내용은 오프셋을 참고한다. |
| align | string | N | 수평 정렬 방식. 자세한 내용은 수평 정렬을 참고한다. |
| gravity | string | N | 수직 정렬 방식. 자세한 내용은 수직 정렬을 참고한다. |
| size | string | N | 이미지의 최대 너비.xxs, xs, sm, md, lg, xl, xxl, 3xl, 4xl, 5xl, full 중 하나의 값을 지정한다.열거된 순으로 이미지 너비가 증가한다. 기본값은 md 이다. |
| aspectRatio | string | N | 이미지의 비율. {width}:{height} 형식으로 지정한다.1~10000 사이의 값으로 _ {width}_와 _{height}_값을 지정해야 한다.단, _ {height}_값은 _{width}_값의 3배를 초과할 수 없다.기본값은 1:1 이다. |
| aspectMode | string | N | 이미지의 비율과 aspectRatio 속성에 지정한 비율이 일치하지 않을 때 이미지가 표시되는 방식.자세한 내용은 아래의 이미지가 표시되는 영역을 참고한다. |
| action | object | N | 이미지를 탭하면 실행되는 액션. Action object를 지정한다. |
이미지가 표시되는 영역 {#rendering-area}
이미지가 표시되는 영역은 size 속성에서 이미지의 최대 너비를 지정하고 aspectRatio 속성에서 이미지의 비율(가로/세로 비율)을 지정함으로써 정의할 수 있다. 해당 size 및 aspectRatio 속성에 의해 지정되는 영역을 이미지 표시 영역이라고 한다.
flex속성으로 지정된 이미지 컴포넌트의 너비가size속성에 의해 계산된 이미지 컴포넌트의 너비보다 작으면, 이미지 표시 영역의 너비도 줄어들게 된다.- 이미지의 비율이
aspectRatio속성에서 지정한 비율과 일치하지 않으면aspectMode속성값에 따라 이미지가 표시된다. 기본값은fit이다.aspectMode의 속성값이 _cover_인 경우: 이미지가 전체 영역을 채운다. 영역에 맞지 않는 이미지 부분은 표시되지 않는다.aspectMode의 속성값이 _fit_인 경우: 전체 영역에 이미지를 채운다. 세로로 긴 이미지는 좌우로 공백이 채워지고, 가로로 긴 이미지는 상하로 공백이 채워진다.
Request Example {#image-request-example}
{ "type": "bubble", "body": { "type": "box", "layout": "horizontal", "contents": [ { "type": "image", "url": "https://developers.worksmobile.com/image/kr/bot/message_type/NAVERWORKS.png", "size": "full", "aspectRatio": "2:1" } ] }}