Componente de imagen en Vue Native

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