We will see how to use the image component in Vue Native.

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