fix img render when no image

constantgillet · Jun 14, 2024 · 1e3fcc0 · 1e3fcc0
1 parent 3e4bf0f
commit 1e3fcc0
Showing 1 changed file with 64 additions and 63 deletions.
diff --git a/app/render-components/ImageElementRendered.tsx b/app/render-components/ImageElementRendered.tsx
@@ -3,69 +3,70 @@ import type { ImageElement } from "~/stores/elementTypes";
 type ImageElementProps = ImageElement;
 
 export const ImageElementRendered = (props: ImageElementProps) => {
-	if (!props.src) {
-		// if (true) {
-		return (
-			<div
-				style={{
-					position: "absolute",
-					transform: `translate(${props.x}px, ${props.y}px) rotate(${props.rotate}deg)`,
-					width: `${props.width}px`,
-					height: `${props.height}px`,
-					borderTopLeftRadius: props.borderTopLeftRadius,
-					borderTopRightRadius: props.borderTopRightRadius,
-					borderBottomLeftRadius: props.borderBottomLeftRadius,
-					borderBottomRightRadius: props.borderBottomRightRadius,
-					overflow: "hidden",
-				}}
-			>
-				<svg width="100%" height="100%">
-					<defs>
-						<pattern
-							id="square-empty"
-							x="0"
-							y="0"
-							width="100"
-							height="100"
-							patternUnits="userSpaceOnUse"
-						>
-							<rect fill="#c5c2c2be" x="0" y="0" width="50" height="50"></rect>
-							<rect
-								fill="#c5c2c2be"
-								x="50"
-								y="50"
-								width="50"
-								height="50"
-							></rect>
-						</pattern>
-					</defs>
+  if (!props.src) {
+    // if (true) {
+    return (
+      <div
+        style={{
+          display: "flex",
+          position: "absolute",
+          transform: `translate(${props.x}px, ${props.y}px) rotate(${props.rotate}deg)`,
+          width: `${props.width}px`,
+          height: `${props.height}px`,
+          borderTopLeftRadius: props.borderTopLeftRadius,
+          borderTopRightRadius: props.borderTopRightRadius,
+          borderBottomLeftRadius: props.borderBottomLeftRadius,
+          borderBottomRightRadius: props.borderBottomRightRadius,
+          overflow: "hidden",
+        }}
+      >
+        <svg width="100%" height="100%">
+          <defs>
+            <pattern
+              id="square-empty"
+              x="0"
+              y="0"
+              width="100"
+              height="100"
+              patternUnits="userSpaceOnUse"
+            >
+              <rect fill="#c5c2c2be" x="0" y="0" width="50" height="50"></rect>
+              <rect
+                fill="#c5c2c2be"
+                x="50"
+                y="50"
+                width="50"
+                height="50"
+              ></rect>
+            </pattern>
+          </defs>
 
-					<rect
-						x="0"
-						y="0"
-						width="100%"
-						height="100%"
-						fill="url(#square-empty)"
-					></rect>
-				</svg>
-			</div>
-		);
-	}
+          <rect
+            x="0"
+            y="0"
+            width="100%"
+            height="100%"
+            fill="url(#square-empty)"
+          ></rect>
+        </svg>
+      </div>
+    );
+  }
 
-	return (
-		<img
-			width={props.width}
-			height={props.height}
-			src={props.src}
-			alt={""}
-			style={{
-				transform: `translate(${props.x}px, ${props.y}px) rotate(${props.rotate}deg)`,
-				borderTopLeftRadius: `${props.borderTopLeftRadius}px`,
-				borderTopRightRadius: `${props.borderTopRightRadius}px`,
-				borderBottomLeftRadius: `${props.borderBottomLeftRadius}px`,
-				borderBottomRightRadius: `${props.borderBottomRightRadius}px`,
-				objectFit: props.objectFit,
-			}}
-		/>
-	);
+  return (
+    <img
+      width={props.width}
+      height={props.height}
+      src={props.src}
+      alt={""}
+      style={{
+        transform: `translate(${props.x}px, ${props.y}px) rotate(${props.rotate}deg)`,
+        borderTopLeftRadius: `${props.borderTopLeftRadius}px`,
+        borderTopRightRadius: `${props.borderTopRightRadius}px`,
+        borderBottomLeftRadius: `${props.borderBottomLeftRadius}px`,
+        borderBottomRightRadius: `${props.borderBottomRightRadius}px`,
+        objectFit: props.objectFit,
+      }}
+    />
+  );
 };