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

Example

https://wonism.github.io/react-hd-image

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 ./ironman@3x.jpg, 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
/>