Allows your images to open in full size.
npm install vue-expandable-image
You have two ways to setup
import VueExpandableImage from 'vue-expandable-image' Vue.use(VueExpandableImage)
var VueExpandableImage = require('vue-expandable-image') Vue.use(VueExpandableImage)
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.
You can check this CodePen to see how it works.
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
<expandable-image :src="require('../assets/image.jpg')" />
||Clicking on the background closes the image|
Copyright (c) 2019 Taha Shashtari