Image

Used to display images.

Demo

React

Vue

Usage

React

import { Image } from '@fintech-sandpit/ui/react';

return (
  <Image
    src="https://example.com/image.png"
    alt="Example image"
    w="20rem"
    ratio={3/4}
  />
);

Vue

<script setup lang="ts">
import { Image } from '@fintech-sandpit/ui/vue';
</script>

<template>
  <Image
    src="https://example.com/image.png"
    alt="Example image"
    w="20rem"
    :ratio="3/4"
  />
</template>

Props

Name	Type	Required	Default	Description
src	string	Yes		Image source
alt	string	Yes		Image alt text
w	CssUnit		100%	Image width
h	CssUnit		100%	Image height
ratio	number		1/1	Aspect ratio

Types

type CssUnit = `${number}${'px' | 'em' | 'rem' | 'vw' | 'vh' | 'vmin' | 'vmax' | '%'}`