[WC-3491] Image widget: fix issue with previews not respecting min/max height settings

packages/pluggableWidgets/image-web/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+- We fixed an issue where previews in Design and Structure modes did not respect the configured minimum and maximum image height.
+
 ## [1.5.1] - 2025-10-29
 
 ### Fixed

packages/pluggableWidgets/image-web/src/Image.editorConfig.ts

@@ -1,9 +1,3 @@
-import {
-    DropZoneProps,
-    RowLayoutProps,
-    structurePreviewPalette,
-    StructurePreviewProps
-} from "@mendix/widget-plugin-platform/preview/structure-preview-api";
 import {
     hidePropertiesIn,
     hidePropertyIn,
@@ -12,10 +6,15 @@ import {
     Properties,
     transformGroupsIntoTabs
 } from "@mendix/pluggable-widgets-tools";
-
+import {
+    DropZoneProps,
+    RowLayoutProps,
+    structurePreviewPalette,
+    StructurePreviewProps
+} from "@mendix/widget-plugin-platform/preview/structure-preview-api";
 import { DatasourceEnum, ImagePreviewProps } from "../typings/ImageProps";
-import StructurePreviewImageSvg from "./assets/placeholder.svg";
 import StructurePreviewImageSvgDark from "./assets/placeholder-dark.svg";
+import StructurePreviewImageSvg from "./assets/placeholder.svg";
 
 type ImageViewPreviewPropsKey = keyof ImagePreviewProps;
 
@@ -202,6 +201,13 @@ export function getPreview(
         }
         if (values.heightUnit === "pixels" && values.height) {
             height = values.height;
+        } else if (values.heightUnit === "auto") {
+            // Mirror the min/max height constraints applied at runtime in constructStyleObject
+            if (values.maxHeightUnit === "pixels" && values.maxHeight) {
+                height = values.maxHeight;
+            } else if (values.minHeightUnit === "pixels" && values.minHeight) {
+                height = values.minHeight;
+            }
         }
         if (width || height) {
             return [width, height, previewImage];

packages/pluggableWidgets/image-web/src/Image.editorPreview.tsx

@@ -1,10 +1,11 @@
-import { parseStyle } from "@mendix/widget-plugin-platform/preview/parse-style";
 import { WebIcon } from "mendix";
 import { ReactElement } from "react";
+import { parseStyle } from "@mendix/widget-plugin-platform/preview/parse-style";
 import { ImagePreviewProps } from "../typings/ImageProps";
-import { Image as ImageComponent } from "./components/Image/Image";
 
 import ImagePlaceholder from "./assets/placeholder.svg";
+import { Image as ImageComponent } from "./components/Image/Image";
+import { constructStyleObject } from "./utils/helpers";
 
 declare function require(name: string): string;
 
@@ -39,10 +40,16 @@ export function preview(props: ImagePreviewProps): ReactElement | null {
             break;
     }
 
+    const type = props.datasource === "icon" && props.imageIcon ? props.imageIcon.type : "image";
+
+    const styleObject = type === "image" && constructStyleObject(props);
+
+    const imageStyle = { ...parseStyle(props.style), ...styleObject };
+
     return (
         <ImageComponent
-            class={props.className}
-            style={parseStyle(props.style)}
+            class={props.class}
+            style={imageStyle}
             widthUnit={props.widthUnit}
             width={props.width ?? 100}
             heightUnit={props.heightUnit}
@@ -51,7 +58,7 @@ export function preview(props: ImagePreviewProps): ReactElement | null {
             responsive={props.responsive}
             onClickType={props.onClickType}
             onClick={undefined}
-            type={props.datasource === "icon" && props.imageIcon ? props.imageIcon.type : "image"}
+            type={type}
             image={image}
             displayAs={props.displayAs}
             renderAsBackground={props.datasource !== "icon" && props.isBackgroundImage}

packages/pluggableWidgets/image-web/src/utils/helpers.ts

@@ -1,11 +1,11 @@
 import { CSSProperties } from "react";
-import { ImageContainerProps } from "typings/ImageProps";
+import { ImageContainerProps, ImagePreviewProps } from "typings/ImageProps";
 
 function getHeightScale(height: number, heightUnit: "pixels" | "percentage" | "viewport"): string {
     return `${height}${heightUnit === "pixels" ? "px" : heightUnit === "viewport" ? "vh" : "%"}`;
 }
 
-export function constructStyleObject(props: ImageContainerProps): CSSProperties {
+export function constructStyleObject(props: ImageContainerProps | ImagePreviewProps): CSSProperties {
     const { widthUnit, heightUnit, minHeightUnit, maxHeightUnit, width, height, minHeight, maxHeight } = props;
 
     const imageStyle: Pick<CSSProperties, "width" | "height" | "minHeight" | "maxHeight" | "maxWidth"> = {};
@@ -14,15 +14,15 @@ export function constructStyleObject(props: ImageContainerProps): CSSProperties
     if (heightUnit === "auto") {
         imageStyle.height = "auto";
 
-        if (minHeightUnit !== "none" && minHeight > 0) {
-            imageStyle.minHeight = getHeightScale(minHeight, minHeightUnit);
+        if (minHeightUnit !== "none" && minHeight! > 0) {
+            imageStyle.minHeight = getHeightScale(minHeight!, minHeightUnit);
         }
 
-        if (maxHeightUnit !== "none" && maxHeight > 0) {
-            imageStyle.maxHeight = getHeightScale(maxHeight, maxHeightUnit);
+        if (maxHeightUnit !== "none" && maxHeight! > 0) {
+            imageStyle.maxHeight = getHeightScale(maxHeight!, maxHeightUnit);
         }
     } else {
-        imageStyle.height = getHeightScale(height, heightUnit);
+        imageStyle.height = getHeightScale(height!, heightUnit);
     }
 
     return imageStyle;