Image

    This component renders an image. In Flexible Template, an image can be sent by using a URL.

    API Type

    Server API

    Request URL

    https://apis.worksmobile.com/r/{API ID}/message/v1/bot/{botNo}/message/push

    HTTP Method

    POST(Content-Type: application/json; charset=UTF-8)

    Request

    Parameter Type Required Description
    type string Y Set this parameter to image.
    url string N URL of an original image (PNG format recommended, HTTPS only)
    Max: 1000 characters
    flex number N The ratio of the width or height of this component within the parent box. For more information, see Width and height of components in "How to Place Components and Adjust Child Components."
    margin string N Minimum space between this component and the previous component in the parent element. For more information, see margin property of the component in “How to Place Components and Adjust Child Components.”
    position string N Reference for offsetTop, offsetBottom, offsetStart, and offsetEnd. Specify one of the following values:

    relative : Use the previous box as reference.
    absolute : Use the top left of parent element as reference.

    The default value is relative. For more information, see Offset in “How to Place Components and Adjust Child Components.”
    offsetTop string N The top offset. For more information, see Offset in “How to Place Components and Adjust Child Components.”
    offsetBottom string N The bottom offset. For more information, see Offset in “How to Place Components and Adjust Child Components.”
    offsetStart string N The left offset. For more information, see Offset in “How to Place Components and Adjust Child Components.”
    offsetEnd string N The right offset. For more information, see Offset in “How to Place Components and Adjust Child Components.”
    align string N Alignment style in horizontal direction.
    For more information, see Alignment in horizontal direction in “How to Place Components and Adjust Child Components.”
    gravity string N Alignment style in vertical direction.
    For more information, see Alignment in vertical direction in “How to Place Components and Adjust Child Components.”
    size string N Maximum size of the image width.
    You can specify one of the following values: xxs, xs, sm, md, lg, xl, xxl, 3xl, 4xl, 5xl, or full.
    The size increases in the order of listing.

    The default value is md.
    aspectRatio string N Aspect ratio of the image. {width}:{height} format.
    Specify the value of {width} and {height} in the range from 1 to 100000.
    However, you cannot set {height} to a value that is more than three times the value of {width}.

    The default value is 1:1.
    aspectMode string N The display style of the image if the aspect ratio of the image and that specified by the aspectRatio property do not match.
    For more information, refer to About the drawing area below.
    action object N Action performed when this image is tapped. Specify an action object.

    About the drawing area

    Specify the max width of the image with the size property and the aspect ratio (horizontal-to-vertical ratio) of the image with the aspectRatio property. The rectangular area determined by the size and aspectRatio properties is called the drawing area. The image is rendered in this drawing area.

    • If the image width specified by the flex property is smaller than that calculated from the size property, the width of the drawing area is scaled down to the width of the component.
    • If the aspect ratio of the image and that specified by the aspectRatio property do not match, the image is displayed according to the aspectMode property. The default value is fit.
      • If the value of aspectMode is cover: The image fills the entire drawing area. Parts of the image that do not fit in the drawing area are not displayed.
      • If the value of aspectMode is fit: The entire image is displayed in the drawing area. A background is displayed in the unused areas to the left and right of vertical images and in the areas above and below horizontal images.

    Request Example

    
    {
      "type": "bubble",
      "body": {
        "type": "box",
        "layout": "horizontal",
        "contents": [
          {
            "type": "image",
            "url": "https://i.ibb.co/XxXMKxH/WORKSMOBILE.png",
            "size": "full",
            "aspectRatio": "2:1"
          }
        ]
      }
    }