Componente de imagen en Vue Native

- Andrés Cruz

In english

Componente de imagen en Vue Native

Veremos como usar el 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

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz En Udemy

Acepto recibir anuncios de interes sobre este Blog.