The image component in Vue Native features the variants you can expect; you can reference images from a URL:
<image class="image" :source="{uri:'https://cdn.pixabay.com/photo/2021/02/10/22/13/lake-6003727_960_720.jpg'}" />You can specify locally in the project:
<image :style="{width:200, height:150, marginTop:50}" :source="require('../assets/lake.webp')" />And you can indicate styles to customize its appearance using CSS; full example:
<template>
<view class="container">
<image class="image" :source="{uri:'https://cdn.pixabay.com/photo/2021/02/10/22/13/lake-6003727_960_720.jpg'}" />
<image :style="{width:50, height:50}" :source="require('../assets/favicon.png')" />
<image :style="{width:200, height:150, marginTop:50}" :source="require('../assets/lake.webp')" />
</view>
</template>
<style>
.container {
margin: 5px;
}
.image {
width: 100%;
height: 200px;
margin-bottom: 10px;
border-radius: 15px;
}
</style>This code is part of my complete course on Vue Native that you can see from the courses section:
https://github.com/libredesarrollo/vue-native-componentes-02/blob/main/components/ImageComponent.vue
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter