modify readme

likuner · Apr 4, 2022 · efda16c · efda16c
1 parent 01f8a9f
commit efda16c
Showing 1 changed file with 30 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -2,8 +2,16 @@
 `lazy-img`
 
 - a custom element of lazy-image-loading based on web-components.
-- it can be used in both Vue and React.
+- it can be used in both `vue` & `react` projects.
+- it can also be used in native `html`.
 # Installing
+## CDN
+
+- you can get `lazy-img` through CDN.
+- you can add `@+version` after `/lazy-img` if you need to load the specified version.
+```html
+<script src="https://unpkg.com/@likun./lazy-img/dist/index.js"></script>
+```
 ## npm
 ```
 npm install @likun./lazy-img
@@ -13,11 +21,28 @@ npm install @likun./lazy-img
 yarn add @likun./lazy-img
 ```
 # Usage
-## Importing package
+## Use in HTML
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>lazy-img</title>
+  <script src="https://unpkg.com/@likun./lazy-img/dist/index.js"></script>
+</head>
+<body>
+  <lazy-img src="image.png" width="500" height="300" alt="lazy image" />
+</body>
+</html>
+```
+## Use in Vue and React
+### Importing package
 ```
-import '@likun./lazy-img';
+import '@likun./lazy-img'
 ```
-## Use in Vue
+### Use in Vue
 ```vue
 <lazy-img
   :src="imgSrc"
@@ -27,7 +52,7 @@ import '@likun./lazy-img';
   @lazyerror="handleError"
 />
 ```
-## Use in React
+### Use in React
 
 - className is not valid in lazy-img, may be the reason there is "-" in the name. However, the name of the custom element of web-components must contain "-".
 - event listeners that need special handling of lazyload & lazyerror in react，the following example：