El componente de imagen en Vue Native presenta las variantes que puedes esperar; puedes referenciar imágenes desde una URL:
<image class="image" :source="{uri:'https://cdn.pixabay.com/photo/2021/02/10/22/13/lake-6003727_960_720.jpg'}" />
Puedes especificar localmente en el proyecto:
<image :style="{width:200, height:150, marginTop:50}" :source="require('../assets/lake.webp')" />
Y puedes indicar estilos para personalizar su aspecto mediante CSS; ejemplo completo:
<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>
Este código forma parte de mi curso completo en Vue Native que puedes ver desde la sección de cursos:
https://github.com/libredesarrollo/vue-native-componentes-02/blob/main/components/ImageComponent.vue
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter