sota-vue-expandable-image

    0.1.2 • Public • Published

    vue-expandable-image

    Allows your images to open in full size.

    Demo Preview

    Setup

    npm install vue-expandable-image
    

    You have two ways to setup vue-expandable-image:

    CommonJS (Webpack/Browserify)

    • ES6
    import VueExpandableImage from 'vue-expandable-image'
    Vue.use(VueExpandableImage)
    • ES5
    var VueExpandableImage = require('vue-expandable-image')
    Vue.use(VueExpandableImage)

    Include

    Include it directly with a <script> tag. In this case, you don't need to write Vue.use(VueExpandableImage), this will be done automatically for you.

    Demo

    You can check this CodePen to see how it works.

    Usage

    Just replace your <img> tag with <expandable-image/>, and it should work!

    The image doesn't load for you?

    If you see your image is broken even though it works on <img/>, it means you're passing a relative path (like ../assets/image.jpg) but not loading it through Webpack. Check out this for more details.

    To fix this issue, you have to load the image explicitly through Webpack before passing it to src. And you can do this using require(imagePath).

    Example:

    <expandable-image
      :src="require('../assets/image.jpg')"
    />

    Props

    Prop Default Description
    close-on-background-click false Clicking on the background closes the image

    License

    MIT

    Copyright (c) 2019 Taha Shashtari

    Keywords

    none

    Install

    npm i sota-vue-expandable-image

    DownloadsWeekly Downloads

    1

    Version

    0.1.2

    License

    MIT

    Unpacked Size

    2.45 MB

    Total Files

    13

    Last publish

    Collaborators

    • avatar