add base image

src/components/BaseImage/BaseImage.vue

@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+import BaseSkeleton from 'UiKit/components/BaseSkeleton/BaseSkeleton.vue';
+import { ref } from 'vue';
+
+const props = withDefaults(defineProps<{
+    src: string | undefined,
+    alt: string,
+	fit: 'cover' | 'contain' | 'inherit'
+}>(), {
+	fit: 'cover',
+});
+
+const isImageLoaded = ref<Boolean>(false)
+const onImageLoaded = () => {
+  setTimeout(() => {
+    isImageLoaded.value = true
+  }, 200)
+}
+</script>
+
+<template>
+	<div
+		class="BaseImage base-image"
+		:class="[`is--${fit}`]"
+	>
+		<BaseSkeleton
+			v-show="!isImageLoaded"
+			height="100%"
+			width="100%"
+			class="base-image__skeleton"
+		/>
+		<img
+			v-show="isImageLoaded"
+			:src="src"
+			:alt="alt"
+			class="base-image__image"
+			:class="[`is--${fit}`]"
+			@load="onImageLoaded"
+		/>
+	</div>
+</template>
+
+<style lang="sass" scoped>
+@import 'index.sass'
+.base-image
+	$root:&
+
+	width: 100%
+	height: 100%
+
+	&__image
+		height: 100%
+		width: 100%
+		&.is--cover
+			object-fit: cover
+		&.is--contain
+			object-fit: contain
+		&.is--inherit
+			object-fit: inherit
+
+	&__skeleton
+		min-height: inherit
+</style>

src/components/BaseImage/index.sass

@@ -0,0 +1,3 @@
+@import 'UiKit/styles/_colors.sass'
+@import 'UiKit/styles/_mixins.sass'
+

src/components/BaseSkeleton/BaseSkeleton.vue

@@ -27,7 +27,7 @@ defineProps({
   position: relative
   overflow: hidden
   background: linear-gradient( 90deg, rgba(207, 219, 255, 0.34) 0%, rgba(235, 243, 255, 0.34) 35.42%, rgba(203, 216, 255, 0.34) 100%)
-  border-radius: 25px
+  border-radius: 2px
 
   &::before
     position: absolute