wt-image.vue

Specs

Props

Name	Required	Types	Default	Description	Example	Deprecated
src	✅	union	-
size		TSTypeOperator	-
alt		string	-
width		union	-
height		union	-
minWidth		union	-
minHeight		union	-
maxWidth		union	-
maxHeight		union	-
overlayIcon		string	-
overlayIconPrefix		string	-

Events

Name	Params	Description
click

Slots

Name	Scope	Description
default	{ alt, src }	Replaces <img> tag

Emaple Image

Code

<template>
  <div style="display: flex; gap: var(--spacing-sm)">
    <wt-image
      :src="imageWide"
      size="lg"
    />
    <wt-image
      :src="imageTall"
      size="lg"
    />
  </div>
</template>

<script setup>
import imageWide from './assets/img_1.png';
import imageTall from './assets/img_2.png';

const props = defineProps({});

const emit = defineEmits([]);
</script>

<style lang="scss" scoped>
.wt-image {
  border: 1px solid red;
}
</style>

Example Image Overlay Icon

Code

<template>
  <div>
    <wt-image
      :src="imageTall"
      size="lg"
      overlay-icon="zoom-in"
    />
  </div>
</template>

<script setup>
import imageTall from './assets/img_2.png';
</script>

<style lang="scss" scoped>
.wt-image {
  border: 1px solid red;
}
</style>

Emaple Image Sizes

3xs
2xs
xs
sm
md
lg
xl
2xl
3xl

Code

<template>
  <div style="display: flex; gap: var(--spacing-sm); flex-wrap: nowrap">
    <wt-table
      :data="sizes.map((size) => ({ size, image }))"
      :headers="[
        { value: 'size', width: '40px' },
        { value: 'image', width: 'auto' },
      ]"
      :selectable="false"
    >
      <template #image="{ item }">
        <wt-image
          :size="item.size"
          :src="item.image"
        />
      </template>
    </wt-table>
  </div>
</template>

<script setup>
import image from './assets/img_3.png';

const props = defineProps({});

const emit = defineEmits([]);

const sizes = ['3xs', '2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'];
</script>

<style lang="scss" scoped>
.wt-image {
  border: 1px solid red;
}
</style>