From 9a953f7f80785045d68e07659d155ad99a786104 Mon Sep 17 00:00:00 2001
From: omkarht <omkar@mermaidchart.com>
Date: Fri, 6 Sep 2024 18:19:17 +0530
Subject: [PATCH] adjusted imageSqaure for html labels

---
 .../rendering-util/rendering-elements/shapes/imageSquare.ts   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/imageSquare.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/imageSquare.ts
index 4972afa89..0bfd04deb 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/imageSquare.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/imageSquare.ts
@@ -79,8 +79,8 @@ export const imageSquare = async (parent: SVG, node: Node) => {
   // Position the label at the top center of the shape
   const yPos =
     imagePosition === 't'
-      ? skeletonHeight / 2 - bbox.height
-      : -skeletonHeight / 2 + (node?.padding ?? 0) / 2;
+      ? skeletonHeight / 2 - bbox.height - (bbox.y - (bbox.top ?? 0))
+      : -skeletonHeight / 2 + (node?.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0));
 
   label.attr('transform', `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))},${yPos})`);