diff --git a/packages/vkui/src/components/Image/Image.e2e-playground.tsx b/packages/vkui/src/components/Image/Image.e2e-playground.tsx
index 76c1f2aea6..0060da71e3 100644
--- a/packages/vkui/src/components/Image/Image.e2e-playground.tsx
+++ b/packages/vkui/src/components/Image/Image.e2e-playground.tsx
@@ -97,6 +97,10 @@ export const ImagePlayground = (props: ComponentPlaygroundProps) => {
borderRadius: ['s'],
borderEndEndRadius: ['l'],
},
+ {
+ src: [base64Image],
+ children: ['CH'],
+ },
]}
>
{(props: ImageProps) => }
diff --git a/packages/vkui/src/components/ImageBase/ImageBase.module.css b/packages/vkui/src/components/ImageBase/ImageBase.module.css
index ce53996250..c2b24e4310 100644
--- a/packages/vkui/src/components/ImageBase/ImageBase.module.css
+++ b/packages/vkui/src/components/ImageBase/ImageBase.module.css
@@ -16,14 +16,25 @@
background-color: transparent;
}
+.ImageBase__children,
.ImageBase__border {
- pointer-events: none;
position: absolute;
- z-index: var(--vkui_internal--z_index_image_base_border);
inset-inline-start: 0;
inset-block-start: 0;
inline-size: 100%;
block-size: 100%;
+}
+
+.ImageBase__children {
+ display: inherit;
+ align-items: inherit;
+ justify-content: inherit;
+ border-radius: inherit;
+}
+
+.ImageBase__border {
+ pointer-events: none;
+ z-index: var(--vkui_internal--z_index_image_base_border);
box-sizing: border-box;
transform-origin: left top;
border: var(--vkui--size_border--regular) solid var(--vkui--color_image_border_alpha);
diff --git a/packages/vkui/src/components/ImageBase/ImageBase.tsx b/packages/vkui/src/components/ImageBase/ImageBase.tsx
index 3cabeb4d72..f478d1e6cf 100644
--- a/packages/vkui/src/components/ImageBase/ImageBase.tsx
+++ b/packages/vkui/src/components/ImageBase/ImageBase.tsx
@@ -248,7 +248,7 @@ export const ImageBase: React.FC & {
/>
)}
{fallbackIcon && {fallbackIcon}
}
- {children}
+ {children && {children}
}
{!noBorder && }