snapshot of https://github.com/makeplane/plane.git @ d868349a55de79979eb8b98701bf1702c67ad634 (2026-09-15)

apps/web/core/components/common/cover-image.tsx

@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { cn } from "@plane/utils";
+// helpers
+import { getCoverImageDisplayURL, DEFAULT_COVER_IMAGE_URL } from "@/helpers/cover-image.helper";
+
+type TCoverImageProps = {
+  /** The cover image URL - can be static, uploaded, or external */
+  src: string | null | undefined;
+  /** Alt text for the image */
+  alt?: string;
+  /** Additional className for the image or skeleton */
+  className?: string;
+  /** Whether to show default image when src is null/undefined. If false, shows loading skeleton */
+  showDefaultWhenEmpty?: boolean;
+  /** Custom fallback URL to use instead of DEFAULT_COVER_IMAGE_URL */
+  fallbackUrl?: string;
+} & React.ComponentProps<"img">;
+
+/**
+ * A reusable cover image component that handles:
+ * - Loading states with skeleton
+ * - Static images (local assets)
+ * - Uploaded images (processed through getFileURL)
+ * - External URLs
+ * - Fallback to default cover image
+ */
+export function CoverImage(props: TCoverImageProps) {
+  const {
+    src,
+    alt = "Cover image",
+    className,
+    showDefaultWhenEmpty = false,
+    fallbackUrl = DEFAULT_COVER_IMAGE_URL,
+    ...restProps
+  } = props;
+
+  // Show loading skeleton when src is undefined/null and we don't want to show default
+  if (!src && !showDefaultWhenEmpty) {
+    return <div className={cn("animate-pulse bg-layer-2", className)} />;
+  }
+
+  const displayUrl = getCoverImageDisplayURL(src, fallbackUrl);
+
+  return <img src={displayUrl} alt={alt} className={cn("object-cover", className)} {...restProps} />;
+}