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

Readme

Keywords

none

Package Sidebar

Install

npm i sota-vue-expandable-image

Weekly Downloads

2

Version

0.1.2

License

MIT

Unpacked Size

2.45 MB

Total Files

13

Last publish

Collaborators

  • johnny-sv