fallback-image

August 10, 2020 ยท View on GitHub

Version GitHub Workflow Status (branch) npm bundle size (scoped) Downloads CodeStyle

Display a fallback while an image is loading, to avoid a jump effect when the image loads.

example

Install

npm i @binance-academy/fallback-image
# -or-
yarn add @binance-academy/fallback-image

Usage

Props

src: Url of the image

alt: Alternative text to displayed if the image connot be loaded

invertedRatio: Inverted ratio as a % (Default: 9/16*100=56.25)

Example

import Image from "fallback-image";

...

<Image alt="Alt text" src="https://via.placeholder.com/800x450" />

<Image
    alt="Alt text"
    src="https://via.placeholder.com/400x300"
    invertedRatio={(3 / 4) * 100}
/>