React HD Image

React component for serving high resolution images depends on display.

Installation

# npm
$ npm i react-hd-image -S
# yarn
$ yarn add react-hd-image -S

Usage

Properties

| name | type | |:----------|:-------------------| | src | string or string[] | | skipCheck | boolean (optional) |

Choose right resolution image depends on display type

If you are on the HD display and there is a ./[email protected], 3x image will be rendered automatically.

<HDImage
  src="./ironman.jpg"
  alt="Iron Man"
/>

Pass an array of several resolution images

If high resolution image's name is not predictable, It is possible to pass an set of image names.

<HDImage
  src={[
    './winterscape.jpg',
    './winterscape-retina-version.jpg',
    './winterscape-hd-version.jpg',
  ]}
  alt="House"
/>

Skip checking high resolution image existence

It will always render normal image.

<HDImage
  src="./ironman.jpg"
  alt="Iron Man"
  skipCheck
/>