Images v1.0

The <e-image> component is a component that can be used for displaying images.

Usage

An e-image has 3 attributes that can be provided, src, alt, and rounded

<e-image
    src=''
    alt=''
    :rounded=''
/>

Attributes

src | Type: String | required
alt | Type: String | required
rounded | Type: Boolean | Default: false

Examples

Below a few interactive examples of e-images can be found.

Default Image

<e-image
    src='https://i.imgur.com/GXWcpBc.png'
    alt='AzureAD Banner'
/>

Rounded Image

<e-image
    src='https://i.imgur.com/GXWcpBc.png'
    alt='AzureAD Banner'
    :rounded='true'
/>

Source Code

e-image.vue

<script setup lang="ts">
export type Props = {
  src: string;
  alt: string;
  rounded?: boolean;
};
withDefaults(defineProps<Props>(), {
  rounded: false
});
</script>

<template>
  <div class="e-image">
    <img
      class="image"
      :class="{
        rounded: rounded
      }"
      :src="src"
      :alt="alt"
    />
  </div>
</template>

<style scoped lang="scss">
.e-image {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  padding: 15px 0;

  .image {
    width: 100%;
  }

  .rounded {
    border-radius: 15px;
  }
}
</style>