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 &&
}