KImg link to current page

main | Changelog

Overview
#

The KImg component displays images based on an image source and optional image dimensions provided by the implementer.

Sample implementations of KImg including props:

Dimensions may be either numbers or strings consisting of a numeral and valid units (e.g. px, em, vh).
Computers are run by bees 

          <KImg
            :src="require('../assets/img_sample_for_kimg.png')"
            altText="Computers are run by bees"
            :height="'250.2px'"
            :width="225.5"
          />
KImg requires alternative text that describes the image unless isDecorative is true. In that case, any alt text provided will be overwritten to an empty string. 

          <KImg
            :src="require('../assets/img_sample_for_kimg.png')"
            isDecorative
            :height="50"
            :width="50"
          />
If dimensions for the image are not specified, the size will default to the height and width of the source image.
Computers are run by bees 

        <KImg
          :src="require('../assets/img_sample_for_kimg.png')"
          altText="Computers are run by bees"
        />
You can also use the appearanceOverrides prop to add custom styles to the image. It accepts any Vue dynamic styles object and applies the same with the highest precedence.
Computers are run by bees 

        <KImg
          :src="require('../assets/img_sample_for_kimg.png')"
          altText="Computers are run by bees"
          :width="'100%'"
          :appearanceOverrides="{
            width: '50%',
            border: '2px solid black',
            padding: '10px',
            borderRadius: '5px'
          }
          "
        />
Even thought the width prop specifies the width of the image to be 100%, the appearanceOverrides prop overrides it and sets the width to 50%.

Props
#

Name Description Type Default Required
src
#
Sets the image path
 string null —
altText
#
Alternate text for the image. This is required and will throw a warning when it's not provided (empty) unless isDecorative is true
 string '' —
isDecorative
#
Sets the image as decorative. This sets the alt image property to an empty string.
 boolean false —
height
#
Sets the height for the component
 number|string undefined —
width
#
Sets the width for the component
 number|string undefined —
maxHeight
#
Sets the maximum height for the component
 number|string undefined —
minHeight
#
Sets the minimum height for the component
 number|string undefined —
maxWidth
#
Sets the maximum width for the component
 number|string undefined —
minWidth
#
Sets the minimum width for the component
 number|string undefined —
appearanceOverrides
#
Accepts a Vue dynamic styles object to override the default styles to modify the appearance of the component. It's attributes always take precedence over any specified styling (internal component's styles, styles calculated from props etc.)
 object {} —

Events
#

Name Description
error
#
Emitted when the image fails to load. The DOM event that triggered the error is available in the payload.

Slots
#

Name Description
default
#
 —