ionic framework - icon - ¿A dónde van las imágenes en IONIC 2?

ionic input

Question

Estoy empezando con Ionic 2. He creado un archivo img en la app dentro de un archivo logo.png. Así que he creado el siguiente código:

css:

.getting-started {
  .logo {
      background-image: url(./img/logo.png);
  }
}

html:

  <ion-col offset-33 width-33 class="logo"><h1>Logo</h1></ion-col>
  <h3>Welcome to your first Ionic app!</h3>

</ion-content>

Sé que el css está funcionando, como si alternase el color de fondo, obtengo los resultados esperados. Sin embargo, no obtengo ninguna imagen de fondo, solo el texto del Logotipo especificado. ¿Dónde debería haber puesto el archivo de imagen?

Answer 1

Actualmente estoy en la versión iónica 3.6 y tuve que usar esto para trabajar: src="../../assets/img/myImage.jpg"

La ruta assets/img/myImage no funcionó para mí

espero que esto ayude

Answer 2

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

las imágenes deben ir en un archivo hermano para compilar, dentro de la carpeta www

• www
• construir
• img

Answer 3

Hola chicos, encontré un método para agregar imágenes al v2 iónico

Cree una carpeta de imágenes en el directorio "www" (www / images /) y agregue todas las imágenes en esta ruta.

Luego, dale a tu imagen una ruta como esta ex: para páginas src = "images / logo.png"

en CSS. ThemeColor {background: url (/images/bg.png)};

Eso es, funciona para mí ...

Gracias

Answer 4

La carpeta de activos es la carpeta correcta para colocar cualquier medio. La ubicación de mi imagen:

fyi: si no tienes la carpeta, solo créela

src > assets > img > background.png

variables.scss

.backgroundImage {
  background-image: url(''../assets/img/background.png'');
}

Luego en la página quiero usarlo en:

home.html

<ion-content padding class="backgroundImage">

</ion-content>

También puede hacer referencia a las imágenes de la siguiente manera:

home.html

<ion-content padding class="backgroundImage">
    <img src="./assets/img/background.png" width="50%" />
</ion-content>

Answer 5

No pude lograr que funcione con un archivo PNG. Funcionó en el navegador, pero cuando construí la aplicación y se implementó en un dispositivo, no se mostró.

En lugar de jugar con el archivo Gulp para entender lo que estaba pasando, descubrí una solución más simple:

Inline la imagen en su HTML (o CSS) usando un URI de datos.

Hay muchas herramientas en línea como esta que convertirán su PNG en un URI de datos Base64.

Answer 6

OK, entonces encontré la respuesta en el foro de IONIC. Las imágenes van en www/img , las rutas a estas es entonces:

url(''../../img/appicon.png'')

cuando se hace referencia desde css o html en una carpeta de página que está en pages en la app .

Espero que esto ayude a cualquiera en el futuro.

Answer 7

Si tu imagen es pool.jpg. Colóquelo en /src/assets/img/pool.jpg

Debe estar en este directorio (activos) ya que es su fuente desde donde se construye todo.

A continuación, detenga su comando servir iónico (Ctrl-C) o lo que sea que use.

Luego, elimine TODO en el directorio www (todo se reconstruye de todos modos).

Luego, reinicie su servidor ejecutando ''servicio iónico'' de nuevo.

Esto reconstruirá el directorio con las imágenes. Puede hacer referencia a la imagen como background-image: url (''../ assets / img / pool.jpg''); en tu código

Estoy usando ionic 3 y es una pena que no capte cambios en el directorio de activos. IONIC debería ver esto.

Answer 8

Tengo la solución. Está utilizando la ruta relativa a la carpeta index.html y no a la plantilla.

Entonces necesitamos usar la ruta sin ... /

src = "img / John_Williams.jpg"

Esto funciona tanto en el navegador como en el apk

Answer 9

Utilizando Ionic 2 beta 6, manejé esto con una simple tarea de trago. Dejé caer mis imágenes en la app/assets/images (esta ruta es completamente arbitraria). Luego, agregué la siguiente tarea a gulpfile.js :

gulp.task("assets", function() {
    return gulp.src(["app/assets/images/*"])
        .pipe(gulp.dest("www/build/images"));
});

También deberá actualizar las tareas de watch y build para incluir la nueva tarea de assets en sus llamadas a runSequence() . No creo que el orden de las tareas en la secuencia sea importante, en este caso:

gulp.task("build", ["clean"], function(done) {
    runSequence(
        ["sass", "html", "fonts", "assets", "scripts"],
        function() {
            buildBrowserify().on("end", done);
        }
    );
});

Si imprime sus imágenes en la misma ruta que yo, entonces haría referencia a sus imágenes en CSS desde ../images/image-name.png y en etiquetas <img> de build/images/image-name.png . Confirmé que estas imágenes son visibles tanto desde el navegador como desde un dispositivo Android. No creo que debería ser diferente para iOS.

Answer 10

www / lib / ionic inside ionic crea una carpeta img ahora tu ruta www / lib / ionic / img pon tu imagen de fondo dentro de esta carpeta img y en tu

www/lib/ionic/css/ionic.css 
inside ionic.css find .view-container class and past this line.
.view-container {
background: url("../img/main_bg.jpg") repeat scroll 0 0 / 100% 100%;
}

Answer 11

EDITAR : A partir de Ionic 2 RC 0, el lugar correcto para colocar las imágenes está en src/assets/img/ y el código correcto para hacer referencia a la imagen es <img src="assets/img/myImg.png"> . Consulte el registro de cambios de Ionic para RC0 (específicamente # 28).

A partir de ahora, con la aplicación oficial Drifty Co. Ionic 2 Conference como referencia, las imágenes deben colocarse dentro del directorio www/ .

En mi aplicación Ionic 2 actual, una imagen se encuentra en www/img/logo.png y se hace referencia en app/pages/page_name/page_name.html como <img src=''img/logo.png''> y funciona como un encanto.

Actualmente usando:

• iónico angular v2.0.0-beta.6 (package.json)
• ionic-native ^ 1.1.0 (package.json)
• ionic-cli v 2.0.0-beta.25 (CLI instalado)