Vue2BgImage

Vue2BgImage Component for Vue 2.x

Install

    npm install vue2-bg-image --save

Demo

For demo, please see here

Usage

1. Import the component

import Vue2BgImage from 'vue2-bg-image';

2.1 Use it globally

Vue.use(Vue2BgImage);

2.2 Or use it locally

components: {
    'vue2-bg-image': Vue2BgImage
},

3. Update your app or template:

<div>
...
<vue2-bg-image></vue2-bg-image>
...
</div>

Properties

There are no properties.

Example

<template>
    <div>
        <vue2-bg-image src="http://www.deelay.me/10000/https://i.ytimg.com/vi/SfBR9aGrk9k/maxresdefault.jpg" caption="Slow loading image" width="200px" height="130px" class="thumbnail"></vue2-bg-image>

        <vue2-bg-image src="http://www.example.com/error.jpg" caption="Missing image" width="200px" height="130px" class="thumbnail"></vue2-bg-image>

        <vue2-bg-image src="https://www.youtube.com/watch?v=7WAsh5XBxbw" caption="Automatic Youtube thumb" width="200px" height="130px" class="thumbnail" @click="click"></vue2-bg-image>

        <vue2-bg-image src="https://www.youtube.com/watch?v=7WAsh5XBxbw" caption="Automatic Youtube thumb" width="200px" height="130px" class="thumbnail" :play-button="true" @click="click"></vue2-bg-image>

        <vue2-bg-image src="https://i.ytimg.com/vi/SfBR9aGrk9k/maxresdefault.jpg" width="200px" height="130px" class="thumbnail">
            <button class="btn btn-danger btn-xs" type="button">
                <i class="glyphicon glyphicon-alert"></i> HTML button
            </button>
        </vue2-bg-image>

        <a href="//google.com/search?q=NaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaN+Batman!">
            <vue2-bg-image src="https://i.imgur.com/IzxYzQO.jpg" width="200px" height="130px" class="thumbnail" caption="Clickable thumb"></vue2-bg-image>
        </a>

        <vue2-bg-image src="http://newimages.yachtworld.com/resize/1/55/79/4935579_20170929064458370_1_XLARGE.jpg?f=/1/55/79/4935579_20170929064458370_1_XLARGE.jpg&w=370&h=246&t=1507025624000" width="200px"
                       height="130px" class="thumbnail" :blur="5" caption="Blurred"></vue2-bg-image>

        <vue2-bg-image src="#ff00ff" width="200px" height="130px" class="thumbnail" caption="Solid color"></vue2-bg-image>

        <vue2-bg-image src="http://newimages.yachtworld.com/resize/1/55/79/4935579_20170929064458370_1_XLARGE.jpg?f=/1/55/79/4935579_20170929064458370_1_XLARGE.jpg&w=370&h=246&t=1507025624000" width="200px"
                       height="130px" class="thumbnail" :animated="50" caption="Animated"></vue2-bg-image>
    </div>
</template>

<script>
    import Vue2BgImage from '../src/index';

    export default {
        name: 'app',
        data() {
            return {}
        },
        components: {
            Vue2BgImage
        },
        methods: {
            click() {
                console.log("click: ", 1);
            }
        },
    }
</script>

Contributing

Contributions are welcome

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build