Acrool React Img

Fast custom img for Reactjs

Features

• Support width, height, aspect
• Support lazy load image
• Support mask animate

Why is the background image placed in :after, the background color placed in :before, and the content requires position & zIndex?

If it is placed directly on itself, transparency 0 will be used during slow loading, which will cause all content to be hidden (such as background color, text content, reading bar). To avoid this problem, it must be layered.

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"
        w={200}
        h={200}
        r={8}
        isLazy
        isLazyMaskVisible
    />;
};

export default Example;

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

License

MIT © Acrool & Imagine