ionic-framework - insertar - ion-avatar size

Cómo insertar imagen en ionic 2

Question

Soy nuevo en ionic 2 y estoy tratando de insertar una imagen, pero no me doy cuenta del verdadero camino. dentro del archivo app / pages / getting-started / getting-started.html

<ion-content padding class="getting-started">
  <ion-card>
    <ion-card-content>
      <img src="img1.png" alt="">
      <img src="img/img1.png" alt="">
      <img src="../img/img1.png" alt="">
    </ion-card-content>
  </ion-card>
</ion-content>

Cree una aplicación / img de carpeta e inserte un archivo img1.png dentro de ella. y el mismo archivo dentro de la carpeta app / pages / getting-started.

Entonces, esto debería ser fácil, pero no puede encontrar nada dentro de los documentos iónicos.

Gracias

Answer 1

¡Simplemente copia tu carpeta img en la carpeta www y listo! ;)

Answer 2

Estaba teniendo el mismo problema, encontré una manera, no sé si es la mejor, pero es un trabajo.

Las imágenes deben ir en un archivo de hermanos para construir, dentro de la carpeta www.
- www
-- construir
- img

Answer 3

Lo siguiente funcionó para mí.

Se insertó <img src="../../assets/imgs/logo.png" alt="couldn''t load"> en el archivo home.html ubicado dentro del directorio app / src / pages / home.

La ubicación de la imagen es app / src / asset / imgs / logo.png

Espero que esto ayude.

Answer 4

Personalmente, agregaría las imágenes donde sea más conveniente para usted, en su caso en la carpeta de la app , y agregaría una tarea Gulp para copiar las imágenes a la carpeta www/build .

Así es como se ve mi gulpfile.js: https://github.com/driftyco/ionic2-app-base/blob/master/gulpfile.js

He agregado esta tarea simple a gulpfile.js alrededor de la línea 66.

gulp.task(''images'', function() {
    gulp.src(''app/**/**/*.png'')
    .pipe(gulp.dest(''www/build''))
});

Asegúrese de que las images la tarea se agreguen a la lista de tareas que se ejecutan antes de la tarea de watch (las tareas enumeradas en [..], tercera línea). Además, asegúrese de ejecutar gulpWatch siempre que agregue una nueva imagen, por ejemplo (línea 7)

gulp.task(''watch'', [''clean''], function(done){
  runSequence(
    [''images'',''sass'', ''html'', ''fonts'', ''scripts''],
    function(){
      gulpWatch(''app/**/*.scss'', function(){ gulp.start(''sass''); });
      gulpWatch(''app/**/*.html'', function(){ gulp.start(''html''); });
      gulpWatch(''app/**/*.png'', function(){ gulp.start(''images''); });
      buildBrowserify({ watch: true }).on(''end'', done);
    }
  );
});

Alternativamente, puede usar este complemento gulpfile.js https://www.npmjs.com/package/ionic-gulp-image-task y gulpfile.js y usarlo en su gulpfile.js similar a otras tareas como copyHTML , copyFonts , copyScripts aquí https://github.com/driftyco/ionic2-app-base/blob/master/gulpfile.js

Espero que tenga sentido.

Answer 5

Probado con Ionic2.rc2:

La compilación predeterminada toma las imágenes en src / asset / img y las coloca en asset / img. Para hacer referencia a ellos desde los archivos scss necesitas subir una carpeta:

background: url(''../assets/img/sports-backgrounds.jpg'');

Esa es la única forma en que funcionó, incluso dejando de lado el ''../'' que funcionó en el navegador durante las pruebas.

Al mismo tiempo, si está haciendo referencia a las imágenes de la vista (archivos html), esto es lo que funciona para mí:

<img src="assets/img/logo-image-for-login-page.jpg"

Ionic 2 es un tanto inestable, por lo que todavía hay algunos caprichos que deben resolverse.

Buena suerte.

Answer 6

Tuve el mismo problema Solo debes crear la carpeta img en www. -> www / img (poner imágenes en la carpeta ...)

Luego, en la página (html) debe hacer referencia a <img src="img/logo.png" />

Pruebo en el navegador Chrome , la aplicación Android y la aplicación Ios . (Ionic 2.0.0-beta.11)

¡Saludos!

Answer 7

Tuve el mismo problema al usar Ionic Beta Latest ionic @ beta11.

Para resolver este problema, puede agregar la ruta absoluta de las imágenes en el archivo copy.config.js que residirá en la carpeta node_modules / @ ionic / app-scripts / config

Puede adjuntar este archivo para una carpeta específica proporcionando la ruta de origen (src) y destino (dest).

Espero que esto ayude a copiar las carpetas de imágenes en la carpeta www / build / images

¡Gracias por adelantado!

Answer 8

Ya que las aplicaciones Ionic2 ES2015 js cumplen con los javascripts normales (ES5), debe tener sus imágenes, etc. en la carpeta www/build

Así que crea una carpeta www/build/img y agrega tus imágenes allí. Entonces deberías poder acceder a él como build/img/img1.png

EDITAR

Agregando una respuesta a la pregunta i don''t undestand why you need to work the code in app folder but put insert the images into www folder

Ionic2 utiliza los últimos estándares de javascript como ES2015 (ES6), Typescript (opcional). Esto nos permite escribir código de una manera ligeramente diferente a la que hacemos en el javascript normal. Con módulos de clases etc.

Sin embargo, aún la mayoría de los navegadores no son compatibles con estos nuevos estándares de javascript, por lo que Ionic usa un concepto llamado transpiler para cambiar el nuevo código de javascript al código de javascript de moda antigua para que los navegadores puedan entender.

Así que con Ionic2, aunque el código u en la carpeta de la aplicación en última instancia se compila y ejecuta desde la carpeta www. Técnicamente hablando, su aplicación iónica aún se ejecuta desde la carpeta www, por ese motivo tiene que agregar sus imágenes a la carpeta www.

Answer 9

<img src = "assects/img/abc.png"/>

img- file name

La imagen debe almacenarse en varios aspectos.