Skip to main content

Image

Dependencies​

This component does not require any dependencies.

To show .psd files, it also needs PSDViewer and its dependencies.

Usage​

import Image from "@arclockproject/common/components/Image";

The examples below are live. Edit the code to try your own values. Drag the image to move it.

Image without PSDViewer​

Without a PSD renderer, .psd files are loaded as normal images.

▶ Show code (click to view and edit)
Live Editor
<Image
  autoPlay
  controls
  enableMovement
  onError={() => console.error("Image: Error!")}
  onLoad={() => console.log("Image: Loaded!")}
  renderer="auto"
  src={`${REMOTE.base}/PXQZNGjZIFo.webp`}
  styleImage={{
    width: "100%",
    height: "100%",
  }}
/>
Result
Loading...

Image with PSDViewer​

.psd files are shown with PSDViewer.

import Image from "@arclockproject/common/components/Image";
import PSDViewer from "@arclockproject/common/components/PSDViewer";
▶ Show code (click to view and edit)
Live Editor
<Image
  autoPlay
  controls
  enableMovement
  onError={() => console.error("Image: Error!")}
  onLoad={() => console.log("Image: Loaded!")}
  psdRenderer={{
    component: PSDViewer,
    isLazy: false,
  }}
  renderer="auto"
  src={`${REMOTE.base}/PXQZNGjZIFo.webp`}
  styleImage={{
    width: "100%",
    height: "100%",
  }}
/>
Result
Loading...

Image with lazy PSDViewer​

To keep your bundle small, load PSDViewer lazily. It is only downloaded when a .psd file is shown. Image wraps it in <Suspense /> for you, so you don't need to add one.

import Image from "@arclockproject/common/components/Image";
import { lazy } from "react";
const PSDViewer = lazy(
  () => import("@arclockproject/common/components/PSDViewer"),
);
▶ Show code (click to view and edit)
Live Editor
<Image
  autoPlay
  controls
  enableMovement
  onError={() => console.error("Image: Error!")}
  onLoad={() => console.log("Image: Loaded!")}
  psdRenderer={{
    component: PSDViewer,
    isLazy: true,
  }}
  renderer="auto"
  src={`${REMOTE.base}/PXQZNGjZIFo.webp`}
  styleImage={{
    width: "100%",
    height: "100%",
  }}
/>
Result
Loading...

API​

See the Image API reference for every prop, method and type.