Image

Image

The "Image" component is a component that can be used for responsive lazy loading images. It also offers a variety of filters.

Usage

import React from "react";
import { Image } from "aloria-ui";

export default function App() {
  return <Image />;
}

Props

The Image component takes the following props:

• src: Specifies the source of the file (image). This is a required prop.

• alt: Specifies the alt attribute (text to be shown if image fails to load) of image. This is an optional prop.

• width: Specifies the custom width of the image. This is an optional prop.

• height: Specifies the custom height of the image. This is an optional prop.

• filter: Specifies the type of filter for the image. This is an optional prop. Available filters:

  1. blur
  2. hue
  3. drop-shadow
  4. cool-drop-shadow
  5. grayscale
  6. contrast

Preview/Example

Here is an example of how to use the Image component.

import React from "react";
import { Image } from "aloria-ui";

export default function App() {
  return (
    <>
      <Image src="../../media/aloria.png" filter="cool-drop-shadow" />
      <Image src="../../media/aloria.png" />
    </>
  );
}