Como Mostrar Una Imagen en Ionic Framework

2 minuto(s)

En esta página:

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.

Código de una aplicación creada con Ionic Framework — 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: