@app-elements/image

Renders an image from an array of src's, assuming the first is low resolution, and the last is high resolution.

Usage no npm install needed!

<script type="module">
  import appElementsImage from 'https://cdn.skypack.dev/@app-elements/image';
</script>

README

Image

Renders an <img /> with an array of src's, rendering each, in order, as the complete. The idea is the first is the smallest filesize and the last is the highest resolution.

Installation

npm install --save @app-elements/image

Usage

import Image from '@app-elements/image'

<Image
  srcs={[
    'http://www.placehold.it/200x150/eee/eee?text=Loading',
    'http://www.placehold.it/400x300/f44/fff?text=MediumRes',
    'http://www.placehold.it/800x600/44f/fff?text=HighRes'
  ]}
/>

Props

Prop	Type	Default	Description
`srcs`	Array	None	An array of image URLs.