ReactJS UI Ant Design Image Component

Image Props

Here are some common props in react antd image:

• src (string): The source URL of the image to be displayed.
• alt (string): Alternative text for the image, which is important for accessibility.
• preview (boolean | object): An object defining how to preview the image or a boolean to enable or disable image preview.
• fallback (string): A fallback image source to display if the primary image fails to load.
• width (number | string): The width of the image. You can specify it as a number (e.g., 200) or a string with units (e.g., '50%').
• height (number | string): The height of the image. You can specify it as a number (e.g., 150) or a string with units (e.g., 'auto').
• onClick (function): A callback function triggered when the image is clicked.
• onLoad (function): A callback function triggered when the image has finished loading.
• placeholder (ReactNode): A React element to be used as a placeholder while the image is loading.
• previewPrefixCls (string): A prefix for the preview component's CSS class.
• fallbackPlacholder (ReactNode): A React element to be used as a placeholder if the primary image and fallback image both fail to load.
• zIndex (number): The z-index CSS property for the image component.
• crossOrigin (boolean | string): Specifies whether to use CORS for the image. Can be set to 'anonymous', 'use-credentials', or a boolean value.
• srcSet (string): A comma-separated list of image URLs to provide multiple sources for different resolutions or screen sizes.
• sizes (string): A hint to the browser about the size of the image, used in conjunction with srcSet.
• draggable (boolean): Specifies whether the image can be dragged.
• className (string): Additional CSS classes for styling purposes.
• style (object): Inline styles to apply to the image component.

Example :

Hiring Partners:

GoogleAmazonMicrosoftFlipkartAdobe1200+ more

Creating React Application And Installing Module

To start using the react antd image Component in your React application, follow these steps :

• Step 1 : Create a new React application using Create React App or your preferred setup.

• Step 2 : Install the Ant Design library.

• Step 3 : Import the necessary components and CSS files.

In your src/index.js file:

• Step 4 : Import the Image Component in your desired React component.

Project Structure

Your react antd image project structure should resemble this:

Example

Now, let's put the Image Component to work with a practical example. Suppose you want to display a featured image for a blog post. You can create a component like this :

When you load an image from a different domain (cross-origin), the browser enforces certain security rules :

• Same-Origin Restriction
• CORS (Cross-Origin Resource Sharing)

In the context of Ant Design's Image component, the crossOrigin prop allows you to specify how cross-origin requests for the image should be handled. This prop accepts the following values:

• anonymous: This is the default value. It indicates that cross-origin requests for the image should be made without credentials (cookies, HTTP authentication, etc.).
• use-credentials: When set to this value, cross-origin requests for the image are made with credentials. This includes sending cookies and other authentication information.

Suppose you want to dynamically set the width and height of an image in a React component, then :

• Create a React Component :

• Use CSS for Responsiveness:

• Pass Props for Width and Height :

• CSS for Additional Responsiveness:

Step to Run Application

To run your React application and see the Ant Design Image Component in action, follow these steps :

• Step 1 : Start the development server.

• Step 2 : Open your web browser and visit http://localhost:3000.

You should now see your featured image displayed in the browser.