https://github.com/nwutils/nw-img-vue
Caches copies of online images locally and loads them first if available
https://github.com/nwutils/nw-img-vue
Last synced: over 1 year ago
JSON representation
Caches copies of online images locally and loads them first if available
- Host: GitHub
- URL: https://github.com/nwutils/nw-img-vue
- Owner: nwutils
- License: mit
- Created: 2019-09-19T17:40:20.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-10-13T13:06:12.000Z (over 3 years ago)
- Last Synced: 2025-02-16T23:02:46.726Z (over 1 year ago)
- Language: Vue
- Homepage: https://nwutils.io
- Size: 15.6 KB
- Stars: 9
- Watchers: 3
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# nw-img-vue
Caches copies of online images locally and loads them first if available
Should work fine in Vue 2 or Vue 3.
* * *
## Usage:
1. `npm install --save-dev nw-img-vue`
1. In `main.js` add this:
```js
import NwImg from 'nw-img-vue';
Vue.use(NwImg);
```
1. In any `.vue` file add
```html
```
* Or this, depending on your setup.
```html
```
You can also just download the `NwImg.vue` file directly from GitHub and drop it in your project. It is completely self-contained and requires no dependencies.
* * *
Works well with **NW.js Vue-CLI Example**:
* https://github.com/nwutils/nw-vue-cli-example
* * *
## How this works:
### In NW.js
* Checks for a local cached copy in the OS's appliction data folder (`window.nw.App.dataPath + '\nw-img-cache\'`)
* If no local version exists, downloads the image to cache
* Always display image from cache (to prevent double-downloading)
### In Browsers
* If `window.nw` or `window.require` is not detected, it just passes the URL directly into an `img` tag. No caching is performed. Useful for codebases that are used for both Web and Desktop builds.