File tree Expand file tree Collapse file tree 1 file changed +15
-14
lines changed Expand file tree Collapse file tree 1 file changed +15
-14
lines changed Original file line number Diff line number Diff line change @@ -11,22 +11,23 @@ $ npm i --save vue-lazy-load-image-component
11
11
12
12
## ` LazyLoadImage ` usage
13
13
14
- ``` javascript
15
- import React from ' react' ;
16
- import { LazyLoadImage } from ' vue-lazy-load-image-component' ;
17
-
18
- const MyImage = ({ image }) => (
14
+ ``` vue
15
+ <template>
19
16
<div>
20
- < LazyLoadImage
21
- alt= {image .alt }
22
- height= {image .height }
23
- src= {image .src } // use normal <img> attributes as props
24
- width= {image .width } / >
25
- < span> {image .caption }< / span>
17
+ <MyImage :image="image" />
18
+ <span>{{image.caption}}</span>
26
19
</div>
27
- );
28
-
29
- export default MyImage ;
20
+ </template>
21
+ <script lang='ts' setup>
22
+ import { LazyLoadImage } from 'vue-lazy-load-image-component';
23
+ const image = ref({
24
+ alt: 'My image',
25
+ height: 100,
26
+ src: 'https://example.com/image.jpg',
27
+ width: 100,
28
+ caption: 'My image caption',
29
+ });
30
+ </script>
30
31
```
31
32
32
33
### Props
You can’t perform that action at this time.
0 commit comments