Push img from .ts

Poseyyy · August 2, 2017, 2:16pm

Here my ts

import { Component } from '@angular/core';
import { NavController, AlertController } from 'ionic-angular';

@Component({
  selector: 'page-approche',
  templateUrl: 'approche.html'
})

export class ApprochePage {

  caption: string;
  items: Array<{img: string}>;

  constructor(public navCtrl: NavController, public alertCtrl: AlertController) {
    this.caption = 'Danger';
    this.items = [];
      this.items.push(
        {img: 'assets/img/ak3.png'},
        {img: 'assets/img/ak4.png'},
        {img: 'assets/img/ak5.png'},
        {img: 'assets/img/ak5-2.png'},
        {img: 'assets/img/ak5-3.png'},
        {img: 'assets/img/ak14.png'},
        {img: 'assets/img/ak14-2.png'},
        {img: 'assets/img/ak17.png'},
        {img: 'assets/img/ak22.png'}
        );
  }

  danger(event) {
    this.caption = 'Danger';
    this.items = [];
      this.items.push(
        {img: 'assets/img/ak3.png'},
        {img: 'assets/img/ak4.png'},
        {img: 'assets/img/ak5.png'},
        {img: 'assets/img/ak5-2.png'},
        {img: 'assets/img/ak5-3.png'},
        {img: 'assets/img/ak14.png'},
        {img: 'assets/img/ak14-2.png'},
        {img: 'assets/img/ak17.png'},
        {img: 'assets/img/ak22.png'}
        );
  }
  prescription(event) {
    this.caption = 'Prescription';
    this.items = [];
      this.items.push(
        {img: 'assets/img/B0.png'},
        {img: 'assets/img/B1.png'},
        {img: 'assets/img/B3.png'},
        {img: 'assets/img/B6a1.png'},
        {img: 'assets/img/B6d.png'},
        {img: 'assets/img/B15.png'},
        {img: 'assets/img/C18.png'},
        {img: 'assets/img/B14.png'},
        {img: 'assets/img/B21a1.png'},
        {img: 'assets/img/B21a2.png'},
        {img: 'assets/img/K10.png'},
        {img: 'assets/img/KR11.png'}
        );
  }
  
}

My Html :

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Approche</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  
      La signalisation d’approche est située en amont du chantier. Elle comprend généralement :
      <ion-list style="margin-top: 10px;">
        <ion-item text-wrap>
         <div class="item-text-center item-text-wrap" (click)="danger($event)">- une signalisation de danger (panneau de type AK).
         <ion-img width="40" height="40" style="background-color:white; margin-left: 5px; margin-bottom: -10px;" src="img/avertir.png"></ion-img></div>
        </ion-item>
        <ion-item text-wrap>
         <div class="item-text-center item-text-wrap" (click)="prescription($event)">- une signalisation de prescription (panneau de type B).
         <ion-img width="50" height="5" style="background-color:white; margin-left: 5px; margin-bottom: 5px;" src="img/prescrire.png"></ion-img></div>
        </ion-item>
        <ion-item text-wrap>
         <div class="item-text-center item-text-wrap">- une signalisation d’indication (panneau de type KC et KD).
         <ion-img width="40" height="40" style="background-color:white; margin-bottom: -20px;" src="img/indication.png"></ion-img></div>
        </ion-item>
      </ion-list>

    <ion-card>
      <ion-card-content>
        <ion-card-header text-center>
          {{caption}}
        </ion-card-header>
        <ion-row>
          <div *ngFor="let item of items">
            <ion-img [src]="item.img" style="background-color:white;" width="100" height="140"></ion-img>
          </div>
        </ion-row>
      </ion-card-content>
    </ion-card>
</ion-content>

quieterkali · August 2, 2017, 3:51pm

“Salut @Poseyyy, je suis de retour” , here is what i did, it messy and and you’ll have to refactore the code, just to show one of the ways you could perfom what you want:
don’t forget to change images paths by your own paths

import { Component } from '@angular/core';
import { NavController, AlertController } from 'ionic-angular';

@Component({
  selector: 'page-approche',
  templateUrl: 'approche.html'
})

export class ApprochePage {

  caption: string;
  items: Array<{img: string}>;
  categories: any = {}
  type1: Array<{img: string}> = [ {img: 'assets/img/construction1.jpg'},
        {img: 'assets/img/construction2.jpg'},
        {img: 'assets/img/construction3.jpg'}];
  type2: Array<{img: string}> = [{img: 'assets/img/construction4.jpg'},
        {img: 'assets/img/construction5.jpg'},
        {img: 'assets/img/construction6.jpg'}];
  type3: Array<{img: string}> = [{img: 'assets/img/construction7.jpg'},
                                {img: 'assets/img/construction8.jpg'}]


  constructor(public navCtrl: NavController, public alertCtrl: AlertController) {
    this.categories = [{imagePath: 'assets/img/construction1.jpg',type:"type1"},
                      {imagePath:  'assets/img/construction4.jpg', type: "type2"},
                      {imagePath:  'assets/img/construction6.jpg', type: "type3"}]
    this.caption = 'Danger';
    this.items = this.type1;
    console.log(this.type1)
  }

  showPictures(type) {
    
    if(type === "type1") {
      console.log(type)
      this.caption = 'Danger';
      this.items = this.type1;
    }else if(type === "type2") {
      console.log(type)
      this.caption = 'Danger';
      this.items = this.type2;
      console.log(this.items)
    }else{
      console.log(type)
      this.caption = 'Prescription';
      this.items = this.type3
    }
  }
  
}



<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Approche</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  
  La signalisation d’approche est située en amont du chantier. Elle comprend généralement :
    <ion-item text-wrap (click)="showPictures(categories[0].type)" margin-top>
      <div class="item-text-center item-text-wrap">- une signalisation de danger (panneau de type AK).
      <img width="40" height="40" style="background-color:white; margin-left: 5px; margin-bottom: -10px;" [src]="categories[0].imagePath" >
      </div>
    </ion-item>
    <ion-item text-wrap (click)="showPictures(categories[1].type)">
      <div class="item-text-center item-text-wrap">- une signalisation de danger (panneau de type AK).
      <img width="40" height="40" style="background-color:white; margin-left: 5px; margin-bottom: -10px;" [src]="categories[1].imagePath" >
      </div>
    </ion-item>
    <ion-item text-wrap (click)="showPictures(categories[2].type)">
      <div class="item-text-center item-text-wrap">- une signalisation de danger (panneau de type AK).
      <img width="40" height="40" style="background-color:white; margin-left: 5px; margin-bottom: -10px;" [src]="categories[2].imagePath" >
      </div>
    </ion-item>

    <ion-card>
      <ion-card-content>
        <ion-card-header text-center>
          {{caption}}
        </ion-card-header>
        <ion-row>
          <div *ngFor="let item of items">
            <img [src]="item.img" style="background-color:white;" width="100" height="140">
          </div>
        </ion-row>
      </ion-card-content>
    </ion-card>
</ion-content>

rapropos · August 2, 2017, 6:23pm

Note: ion-img is only meant to be used inside of virtual-scroll

quieterkali · August 2, 2017, 6:28pm

thank very much for this information, something new i learnt today

Poseyyy · August 4, 2017, 8:05am

@quieterkali Ahah nice french, thank you for your help ! It works really fine ! @rapropos Thank you for this information, I was wondering the difference between them

Topic		Replies	Views
How to insert automatically img ionic-v3	7	644	February 21, 2018
Push an Image ionic-v3	2	663	April 26, 2017
Some Images don't load in Ionic build or in deployed apk ionic-v3	2	517	December 18, 2018
Show image on physical phone ionic-v3	10	1105	December 24, 2017
Ionic image dont see ionic-v3	5	656	July 9, 2017

Push img from .ts

Related topics