Image

Overview

The Image component is a flexible and efficient way to display product images on your e-commerce website. This component is designed to enhance the visual appeal of your online store by ensuring that images load quickly and look great across all devices.

Usage

// importing component
import { Image } from "@unbxd-ui/react-search-components";
 
// import style for the component
import "@unbxd-ui/react-search-components/styles/image.css";

If the styles import does not work, use the following code to import it:

require.resolve("@unbxd-ui/react-search-components/styles/image.css")

Live Demo

// code used for above example
import { Image } from "@unbxd-ui/react-search-components";
 
<Image imageUrl="image.png" />

Props

• The URL of the image that must be rendered.

• The URL of the image that must be shown when the mouse cursor is hovered on the Image component.

• The URL of the image that must be rendered when the original image URL gives some error.

• This prop will be used to style the component.
• The value must use a defined structure (the structure can be seen in the following example).
• The keys in the structure must be the same while the values can changed as per the user's choice.

styles={{
	mainImage: "main-image" // used for the img element
}}

Related Components

Products