0.0.2 • Published 4 years ago
ny-image v0.0.2
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