NativeScript-Vue zoom image - vue.js

Question

I am working on a basic app that has a list of items and when an item is selected its corresponding image is show in an image tag.Issue is, the images are very "wide" and hence appear very small. I am trying to somehow enable the zoom functionality on the image for the user. I checked all "stretch" options but "pinch" and "zoom" are not working. According to official documentation, i looked at decodeHeight and decodeWidth but they do not appear to be working as well.
I appreciate any help i can get, Following is the code:
<template>
<Page class="page">
<ActionBar title="Home" class="action-bar" />
<ScrollView>`enter code here`
<StackLayout class="home-panel">
<Image :src="img_src" strech="AspectFill"/>
<ListView for="images in img_data" #itemTap="onButtonTap" style="height:200vh">
<v-template>
<Label :text="images.name" />
</v-template>
</ListView>
<!-- <Button text="Button" #tap="onButtonTap" /> -->
</StackLayout>
</ScrollView>
</Page>
</template>
<script>
export default {
methods: {
onButtonTap(event) {
console.log(event.index);
this.img_src = "~/components/" + this.img_data[event.index].image;
}
},
data() {
return {
img_src: "",
img_data: [
{ name: "Iron Man", image: "iron_man.png" },
{ name: "super man", image: "super_man.png" },
{ name: "Batman", image: "batman.png" },
{ name: "Flash", image: "flash.png" },
]
};
}
};
</script>
<style scoped>
.home-panel {
vertical-align: top;
padding-top: 20;
font-size: 20;
margin: 15;
}
.description-label {
margin-bottom: 15;
}
</style>

Answer 1

First, install nativescript-image-zoom plugin:
tns plugin add nativescript-image-zoom
Then globally register the ImageZoom element in your main.js:
Vue.registerElement('ImageZoom', () => require('nativescript-image-zoom').ImageZoom);
Now you can use it as a global component anywhere in your app you want.
<ImageZoom v-if="ifStatement"
:src="imageSrc"
class="main-image" />
Keep in mind that while global registration of the component doesn't hurt the performance, it prevents you from lazy loading the element.

Answer 2

Install the plugin by running the following command
tns plugin add nativescript-image-zoom
Replace your Image tag with this custom component
<StackLayout class="home-panel">
<ui:ImageZoom :src="img_src" strech="AspectFill"/>
<ListView for="images in img_data" #itemTap="onButtonTap" style="height:200vh">
<v-template>
<Label :text="images.name" />
</v-template>
</ListView>
<!-- <Button text="Button" #tap="onButtonTap" /> -->
</StackLayout>
Don't forget to add xmlns to your Page element.
xmlns:ui="nativescript-image-zoom"
In case you have any another question, please don't hesitate to ask.