ny-image

ny-image is a progressive image web component, this component has developed base on Stencil, build to support all js framework & pure js.

Run the sample

To try this component:

git clone git@github.com:tuannguyen1702/progressive-image.git
cd progressive-image

and run:

npm install
npm start

Using this component with different JS frameworks

Node Modules

• Run npm install ny-image --save
• Put a script tag similar to this <script src='node_modules/ny-image/dist/ny-image.js></script> in the head of your index.html
• Then you can use the element <ny-image> anywhere in your template, JSX, html etc

In a stencil-starter app

• Run npm install ny-image --save
• Add this import to your root component or root module: import 'ny-image';
• Then you can use the element <ny-image> anywhere in your template, JSX, html etc

In a React/Rollup/Webpack app

• Run npm install ny-image --save
• Add this import to your root component or root module: import { defineCustomElements } from 'ny-image';;
• Call defineCustomElements(window); in your js file
• Refer to Stencil

Example usage

<ny-image src="/assets/images/s1.jpg" large-src="/assets/images/1.jpg" alt="my photo"></ny-image>

• 'url' is a very small preview image - typically 20px in width saved with high JPEG compression.
• 'large-src' is the large image