{"id":15566953,"url":"https://github.com/kevindesousa/vue-image-loader","last_synced_at":"2025-04-23T23:48:31.532Z","repository":{"id":57124508,"uuid":"144385140","full_name":"kevindesousa/vue-image-loader","owner":"kevindesousa","description":"Vue progressive image loader plugin like Medium","archived":false,"fork":false,"pushed_at":"2018-08-26T10:03:57.000Z","size":7518,"stargazers_count":59,"open_issues_count":2,"forks_count":8,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-23T23:48:22.476Z","etag":null,"topics":["image","loading","medium","progressive-image","vue","vue-components","vue2","vuejs","vuejs2"],"latest_commit_sha":null,"homepage":"https://www.kevindesousa.me/vue-image-loader/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kevindesousa.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-08-11T12:54:53.000Z","updated_at":"2023-09-16T21:03:02.000Z","dependencies_parsed_at":"2022-08-31T08:11:53.145Z","dependency_job_id":null,"html_url":"https://github.com/kevindesousa/vue-image-loader","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevindesousa%2Fvue-image-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevindesousa%2Fvue-image-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevindesousa%2Fvue-image-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevindesousa%2Fvue-image-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kevindesousa","download_url":"https://codeload.github.com/kevindesousa/vue-image-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250535098,"owners_count":21446505,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["image","loading","medium","progressive-image","vue","vue-components","vue2","vuejs","vuejs2"],"created_at":"2024-10-02T17:09:04.044Z","updated_at":"2025-04-23T23:48:31.506Z","avatar_url":"https://github.com/kevindesousa.png","language":"JavaScript","funding_links":[],"categories":["UI组件","Components \u0026 Libraries","UI Components [🔝](#readme)","UI Components"],"sub_categories":["形成","UI Components","Form"],"readme":"# vue-image-loader\n\nVue progressive image loading plugin\n\n\n![alt tag](https://raw.githubusercontent.com/kevindesousa/vue-image-loader/master/example.gif)\n\nArticle here : [https://www.kevindesousa.me/vue-image-loader/](https://www.kevindesousa.me/vue-image-loader/)\n\n## Installation\n\n```bash\n$ npm install @kevindesousa/vue-image-loader\n```\n\n## Usage\n\n```js\nimport Vue from 'vue'\nimport VueImageLoader from '@kevindesousa/vue-image-loader'\n\nVue.use(VueImageLoader)\n```\n\n#### Progressive loader image\n\nInstead of using the normal `img` tag to load images\n\n```html\n\u003cimg src=\"https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?fit=crop\u0026crop=entropy\u0026w=3456\u0026h=2304\" /\u003e\n```\n\nuse the `image-loader` component already globally available after the plugin installation\n\n```html\n\u003cimage-loader\n  src=\"https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?fit=crop\u0026crop=entropy\u0026w=3456\u0026h=2304\"\n  width=\"864px\"\n  height=\"476px\" /\u003e\n```\n\n## Placeholders\n\nTo be able to immediately show some feedback to the user, it is possible to pass a placeholder image, which could be also 1% the size of the main image: it will be blurred so you can go crazy with optimizations here.\n\nin this example I actually use the same image, but you have the idea here\n\n```html\n\u003cimage-loader\n  src=\"https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?fit=crop\u0026crop=entropy\u0026w=3456\u0026h=2304\"\n  placeholder=\"https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?w=100\"\n  width=\"864px\"\n  height=\"476px\"\n/\u003e\n```\n\n# Issues and features requests\nPlease drop an issue, if you find something that doesn't work, or a feature request at https://github.com/kevindesousa/vue-image-loader/issues\n\nFollow me on twitter [@kevin_desousa](https://twitter.com/kevin_desousa)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkevindesousa%2Fvue-image-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkevindesousa%2Fvue-image-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkevindesousa%2Fvue-image-loader/lists"}