index.tsx

Overview

This file defines a React functional component named Image that loads an image resource requiring authorization and displays it using the Ant Design Image component. Unlike a standard <img> tag, this component fetches the image manually with custom HTTP headers (including authorization tokens), converts the response into a blob URL, and then renders the image. It also supports an optional preview feature for displaying a larger preview modal on click, leveraging Ant Design’s built-in image preview functionality.

This component is useful in scenarios where images are protected behind authorization and cannot be loaded simply by setting the image src URL directly in an <img> tag.

Detailed Explanation

ImageProps Interface

Defines the props accepted by the Image component.

Image Component

const Image = ({ src, preview = false }: ImageProps) => { ... }

Purpose

• Fetches an image from a protected resource using the Fetch API, with authorization headers.

• Converts the fetched image data into a blob URL for safe and authorized display.

• Cleans up the blob URL when the component unmounts or the image source changes.

• Renders the image using Ant Design's <Image /> component with optional preview functionality.

Parameters

• src (string): The URL of the image to be fetched and displayed.

• preview (boolean, optional): Enables image preview modal; defaults to false.

State

• imageSrc (string): Internal state holding the blob URL created from the fetched image data.

Behavior

• On mount and whenever src changes:

  • Calls loadImage() asynchronously to fetch the image with authorization headers.

  • Converts the fetched image blob into a temporary object URL.

  • Updates imageSrc state with this URL.

• On unmount or before next effect run:

  • Revokes the previously created object URL to free memory.

Error Handling

• Logs errors to the console if the image fetch fails.

Returns

• If imageSrc is set, renders <AntImage src={imageSrc} preview={preview} />.

• Otherwise, renders null (nothing).

Usage Example

import Image from './index';

const MyComponent = () => (
  <div>
    <h3>Protected Image</h3>
    <Image src="https://myapi.com/protected/image123" preview={true} />
  </div>
);

Implementation Details

• Authorization Header: Uses a constant Authorization as the header key and retrieves the token/value via getAuthorization() utility. This ensures the image fetch request includes proper credentials for protected resources.

• Blob URL Creation: Uses URL.createObjectURL(blob) to convert the binary image data into a URL that can be assigned to image src. This approach works around CORS and authorization issues that prevent direct linking.

• Resource Cleanup: Calls URL.revokeObjectURL() to prevent memory leaks when the component unmounts or the image changes.

• Ant Design Integration: Leverages Image component from antd for consistent UI and preview functionality.

Interactions with Other Parts of the System

• Authorization Constants and Utilities:
  Imports Authorization constant and getAuthorization utility from internal modules (@/constants/authorization and @/utils/authorization-util respectively). These provide the necessary header keys and token values for authenticated requests.

• Ant Design UI Library:
  Uses the Image component from antd to display images with built-in support for features like preview modals.

• React Hooks:
  Uses useState for managing the blob URL and useEffect to trigger fetch operations on src changes and to perform cleanup.

Diagram: Component Interaction and Workflow

flowchart TD
    A[Props: src, preview] --> B[useEffect triggered on src change]
    B --> C[fetch image with authorization header]
    C --> D[response.blob()]
    D --> E[createObjectURL(blob)]
    E --> F[setImageSrc(blob URL)]
    F --> G[Render AntImage with blob URL and preview]
    B --> H[Cleanup: revokeObjectURL on unmount or src change]

Summary

This file exports a single React component Image that:

• Provides a secure way to load and display images requiring authorization.

• Uses fetch and blob URLs to handle protected image resources.

• Integrates seamlessly with Ant Design’s image preview.

• Manages resource cleanup to avoid memory leaks.

• Depends on internal authorization utilities for header management.

It is a specialized image loader component designed for applications where images are not publicly accessible and require authorization tokens to be fetched and displayed.