# made-vue-image

Latest version **0.1.0-alpha.6** (published 2022-05-01) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

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

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.1.0-alpha.6 |
| Published | 2022-05-01 |
| First published | 2021-11-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 28.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Maintainers | jamesmcroft |
| Keywords | made, vue, ui library, component library, component, image, background image, loading |

## Links

- npm: https://www.npmjs.com/package/made-vue-image
- Repository: https://github.com/MADE-Apps/MADE-Vue
- Homepage: https://github.com/MADE-Apps/MADE-Vue#readme
- Issues: https://github.com/MADE-Apps/MADE-Vue/issues
- npm.io page: https://npm.io/package/made-vue-image

## Dependencies (1)

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

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@progress/kendo-vue-listbox](https://npm.io/package/@progress/kendo-vue-listbox.md) — 932 weekly downloads

## Recent versions

- 0.1.0-alpha.6 (latest) — 2022-05-01
- 0.1.0-alpha.5 — 2022-02-08
- 0.1.0-alpha.4 — 2021-11-17
- 0.1.0-alpha.3 — 2021-11-06

## README

<img src="https://github.com/MADE-Apps/MADE-Vue/blob/main/assets/ProjectBanner.png" alt="MADE Vue project banner" />

# MADE Vue - Image

[![License - MIT](https://img.shields.io/badge/License-MIT-yellow)](https://github.com/MADE-Apps/MADE-Vue/blob/main/LICENSE)
[![Build - GitHub Actions](https://github.com/MADE-Apps/MADE-Vue/actions/workflows/made-vue-image.yml/badge.svg)](https://github.com/MADE-Apps/MADE-Vue/actions/workflows/made-vue-image.yml)
[![Source - npmjs](https://img.shields.io/npm/v/made-vue-image)](https://www.npmjs.com/package/made-vue-image)
[![npm](https://img.shields.io/npm/dt/made-vue-image)](https://www.npmjs.com/package/made-vue-image)

A Vue 3 image and background image component, allowing an image to be downloaded while showing a loading indicator, showing a placeholder image if the source image fails to load.

<img src="https://raw.githubusercontent.com/MADE-Apps/MADE-Vue/main/assets/components/image.png" alt="MADE Vue Image Component" />

## Usage

To customize the image or background image component, you'll want to import the scss styling:

```
import "made-vue-image/styles.scss";
```

In your main file, you can import the component:

```
import { createApp } from "vue";
import App from "./App.vue";

import Image from "made-vue-image";

const app = createApp(App);
...
app.use(Image);
...
app.mount("#app");
```

You can then reference the image and background image components in your app:

```
<template>
  <div>
    <m-image
      :src="imageSrc"
      :alt="imageAlt"
      :placeholderSrc="placeholderSrc"
      :placeholderAlt="placeholderAlt"
      class="my-image mb-3"
    />

    <m-image-bg
      :src="imageSrc"
      :placeholderSrc="placeholderSrc"
      class="my-image"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Page",
  data() {
    return {
      imageSrc: "https://placekitten.com/300/200",
      imageAlt: "A cute kitten",
      placeholderSrc: "https://via.placeholder.com/300x200/fff.png",
      placeholderAlt: "Image placeholder",
    };
  },
});
</script>

<style>
.mb-3 {
  margin-bottom: 1rem;
}

.my-image {
  width: 300px;
  height: 200px;
}
</style>
```

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