Skip to content
A vue component that allows your images to open in full size.
Vue JavaScript
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build first commit Feb 25, 2019
dist add close-on-background-click option Sep 15, 2019
example add close-on-background-click option Sep 15, 2019
src add close-on-background-click option Sep 15, 2019
.eslintrc.json first commit Feb 25, 2019
.gitignore first commit Feb 25, 2019
LICENSE first commit Feb 25, 2019
README.md add close-on-background-click option Sep 15, 2019
demo-preview.gif first commit Feb 25, 2019
package-lock.json first commit Feb 25, 2019
package.json add close-on-background-click option Sep 15, 2019

README.md

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

You can’t perform that action at this time.