A vue component that allows your images to open in full size. Allows your images to open in full size.
Allows your images to open in full size.
npm install vue-expandable-image
You have two ways to setup
source-js import VueExpandableImage from 'vue-expandable-image' Vue.use(VueExpandableImage)
source-js 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!
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
text-html-basic <expandable-image :src="require('../assets/image.jpg')" />
||Clicking on the background closes the image|