Componente de imagen en Vue Native

- Andrés Cruz

In english

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.

!Cursos desde!

10$

En Udemy

Quedan 1d 16:35!


Udemy

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
¡Hazte afiliado en Gumroad!