Components

Image

The Image component is used to embed an image in a page, or as a child of another component.

Usage

Here's an example of utilizing the component via regular markdown syntax:

![Image alt text](/images/examples/kong-icon.svg)

You can also pass inline attributes to the image as needed to add classes, specify the width, and more:

![Image alt text](https://example.com/kong-icon.svg){style="border: 1px solid green; padding: 10px; width: 80px;" .custom-image-class}

As an alternative, you can also utilize the Image component as shown here to allow for more customization:

alt text
::image
---
src: "/images/examples/kong-icon.svg"
alt: "alt text"
width: "180"
height: "auto"
border: "1px solid gray"
border-radius: "8px"
display: "block"
margin: "20px"
padding: "10px"
---
::
Image Component Props

The image source attribute.

The image alt text.

The width of the image in pixels. Accepts a string | number.

The height of the image in pixels. Accepts a string | number.

The border of the element. Accepts string | null.

The border radius of the element. Accepts string | null.

The display type of the component. Accepts the CSS values for 'display'.

The margin of the component. Accepts string | null.

The padding of the component. Accepts string | null.

Props

Shared Props

This component also includes the shared props listed below:

  • border - default is none.
  • borderRadius - default is null.
  • display - default is inline.
  • padding - default is null.
  • margin - default is null.
  • styles - default is ''.

See here for more information on shared props.

src

Specify the source attribute of the image. This must be a full URL, as the Image component does not support relative paths.

  • Type: string
  • Default: ''
::image
---
src: "https://example.com/images/icon.svg"
---
::

alt

The alt text for the image.

  • Type: string
  • Default: ''
::image
---
src: "https://example.com/images/icon.svg"
alt: "Some alt text"
---
::

width

Sets the width of the Image component, such as in pixels or a percentage.

  • Type: string | number
  • Default: undefined
::image
---
src: "https://example.com/images/icon.svg"
width: "120"
---
::

height

Sets the height of the Image component, such as in pixels or a percentage.

  • Type: string | number
  • Default: undefined
::image
---
src: "https://example.com/images/icon.svg"
height: "150"
---
::