# responsive-vue-image

> Responsive Vue Image

Latest version **1.0.4** (published 2020-11-01) · ISC license · 0 weekly downloads

## Install

```sh
npm install responsive-vue-image
pnpm add responsive-vue-image
yarn add responsive-vue-image
bun add responsive-vue-image
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2020-11-01 |
| First published | 2020-10-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 479.2 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Simon Marcel Linden |
| Maintainers | simon.marcel.linden |
| Keywords | Responsive, Image, Vue |

## Links

- npm: https://www.npmjs.com/package/responsive-vue-image
- Repository: https://github.com/SimonMarcelLinden/responsive-vue-image
- Homepage: https://github.com/SimonMarcelLinden/responsive-vue-image#readme
- Issues: https://github.com/SimonMarcelLinden/responsive-vue-image/issues
- npm.io page: https://npm.io/package/responsive-vue-image

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^2.6.11

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 1.0.4 (latest) — 2020-11-01
- 1.0.3 — 2020-10-29
- 1.0.2 — 2020-10-29
- 1.0.1 — 2020-10-29
- 1.0.0 — 2020-10-28

## README

<h1 align="center">responsive-vue-image</h1>

[![Latest Version on NPM](https://img.shields.io/npm/v/responsive-vue-image.svg?style=flat-square)](https://www.npmjs.com/package/responsive-vue-image)
[![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE.md)
[![npm](https://img.shields.io/npm/dt/responsive-vue-image?style=flat-square)](https://www.npmjs.com/package/responsive-vue-image)


> Vue Component for responsive (desktop, tablet and mobile) images elements with fallback image.
# responsive-vue-image

## Install and basic usage
Install via NPM...
```
npm i -s responsive-vue-image
```

Register the component:
```
import Vue from 'vue'
import ResponsiveImage from 'responsive-vue-image';

Vue.component('ResponsiveImage', ResponsiveImage);
```
Use the component:

```
<template>
  <div id="app">
    <ResponsiveImage />
  </div>
</template>

<script>
import ResponsiveImage from 'responsive-vue-image';

export default {
  name: 'App',
  components: {
    ResponsiveImage
  }
}
</script>
```

### Props

#### fallbackImage
Type: `String`<br>
Required: `false`<br>
Default: `https://via.placeholder.com/64`

Fallback image which is loaded if the loaded image is not available.


#### image
Type: `Object`<br>
Required: `false`<br>
Default: 
```javascript
{
    imageMobile : 'https://via.placeholder.com/128', // Image for mobile media view
    imageTablet : 'https://via.placeholder.com/256', // Image for tablet media view    
    image       : 'https://via.placeholder.com/512', // Image for desktop media view
    alt         : 'Default Image'                    // Image for mobile
}
```

The alt attribute provides alternative information for the image if a user is still unable to view it for some reason (a slow connection, an error in the src attribute, or if the user is using a screen reader).


## Contributing

Any contribution to the code or any part of the documentation and any idea and/or suggestion are very welcome.

``` bash
# serve with hot reload at localhost:8081
npm run start

# distribution build
npm run build

```

## License

[MIT license](LICENSE)

---
_Source: https://npm.io/package/responsive-vue-image · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._