Acrool React Img

^1.1.0 support react >=18.0.0 <20.0.0

Features

• Support width, height, aspect
• Support lazy load image
• Support mask animate
• Use native img tag with object-fit for better performance

Why use img tag instead of background image?

Using the native img tag with object-fit provides better performance and accessibility. It also avoids potential issues with background image layering and provides native image attributes like alt text for better SEO and accessibility.

Install

yarn add @acrool/react-img

Usage

add in your index.tsx

import "@acrool/react-img/dist/index.css";

then in your page

import {Flex, fr, Grid} from '@acrool/react-grid';
import styled from 'styled-components';

import {Img} from '@acrool/react-img';
import {generatorArray} from '@acrool/js-utils/array';

const Example = () => {
    return <Img
        src="https://acrool-react-picker.pages.dev/sample/1.jpg"
        width={200}
        height={200}
        radius={8}
        isLazy
        isLazyLoaderVisible
    />;
};

export default Example;

There is also a example that you can play with it:

License

MIT © Acrool & Imagine