Como Mostrar Una Imagen en Ionic Framework

Nube Colectiva

hace 2 meses

Como Mostrar Una Imagen en Ionic Framework

Mediante Ionic Framework podemos crear aplicaciones dinámicas, haciendo uso de tecnologías web.

Por ejemplo, podemos mostrar una imagen en una aplicación.

En este tutorial, te enseñaré a Como Mostrar Una Imagen en Ionic Framework, vamos con ello.

Las aplicaciones móviles híbridas permiten ahorrar recursos a las empresas y organizaciones

Para mostrar un imagen en una aplicación creada con Ionic Framework solo debes hacer uso de la etiqueta html <img>.

Recuerda que Ionic Framework usa tecnologías web como HTML, CSS y JavaScript.

Recuerda que la imagen debes colocarla en src > assets:


/mi-aplicacion
├── /.angular
├── /.git
├── /.vscode
├── /node_modules
├── /resources 
├── /src
    ├── /app 
    ├── /assets // Directorio para las imágenes 
        ├── /icon 
        ├── logo.jpg // Imagen que uso en este ejemplo 
        ├── shapes.svg 
    ├── /environments 
    ├── /theme 
    ├── global.scss 
    ├── index.html 
    ├── main.ts 
    ├── polifylls.ts 
    ├── test.ts 
    ├── zone-flags.ts 
├── .browserslistrc 
├── .editorconfig 
├── .eslintrc.json
├── .gitignore 
├── angular.json
├── capacitor.config.ts 
├── ionic.config.json
├── karma.conf.js
├── package.json
├── package-lock.json
├── tsconfig.app.json
├── tsconfig.json 
├── tsconfig.spec.json

/mi-aplicacion

├── /.angular

├── /.git

├── /.vscode

├── /node_modules

├── /resources

├── /src

├── /app

├── /assets // Directorio para las imágenes

├── /icon

├── logo.jpg // Imagen que uso en este ejemplo

├── shapes.svg

├── /environments

├── /theme

├── global.scss

├── index.html

├── main.ts

├── polifylls.ts

├── test.ts

├── zone-flags.ts

├── .browserslistrc

├── .editorconfig

├── .eslintrc.json

├── .gitignore

├── angular.json

├── capacitor.config.ts

├── ionic.config.json

├── karma.conf.js

├── package.json

├── package-lock.json

├── tsconfig.app.json

├── tsconfig.json

├── tsconfig.spec.json

Sabías que la primera versión alfa de Ionic Framework se lanzo en Noviembre de 2013.

Entonces mostramos nuestro imagen usando la etiqueta HTML <img>.

También sirve para mostrar una imagen desde una URL, asimismo le podemos agregar estilos CSS en línea:


<!-- Imagen desde el directorio 'assets' -->
<img src="assets/logo.jpg" style="padding:25px;" />

<!-- Imagen desde una URL -->
<img src="https://nubecolectiva.com/img/logo2.jpg" style="padding:25px;" />

Si voy al navegador, puedo ver que las imágenes se muestran sin problemas en mi aplicación creada con Ionic Framework:

Así de fácil puedes Mostrar Una Imagen en Ionic Framework.

Conoce estas 3 Empresas o Proyectos Que Usan Ionic Framework.

Conclusión

En este tutorial has aprendido a Como Mostrar Una Imagen en Ionic Framework.

Con ello no tendrás problemas en mostrar una o varias imágenes en tu aplicación.

Practica y practica mucho, solo así serás un maestro en Ionic Framework.

Nota(s)

No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.