Discussion :

[sahya]

Bonsoir à toutes et à tous,

il y a télement à dire..; alors je vais droit au but.
=> j'aimerai afficher des images que je reçoi à partir d'une requette Https.
pour se faire, mon rest api me renvois une list d'objet (ImageBien)
mais je n'arrive pas à exploiter ces informations corectement....

je vous montre...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
rechercheImagesBien(): void{
    // tslint:disable-next-line:max-line-length
    this.imagService.rechercherParBienid(this.b).subscribe((reponse: Array<ImageBien>) => {
      // tslint:disable-next-line:prefer-for-of
      for (let i = 0; i < reponse.length; i++){
 
        console.log(reponse[i]);
      }
      console.log(reponse);
    }, reponse => alert(this.error));
  }

Voila la réponse de mon console.log:

comme vous pouvez le voir, je reçois bien tout ce que j'ai besoin pour recréer ou voir mes images ... Apres ça coince..

J'ai testé ça.... Mais rien.. ou plutot , je ne comprend pas l'erreur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
rechercheImagesBien(): void{
    // tslint:disable-next-line:max-line-length
    this.imagService.rechercherParBienid(this.b).subscribe((reponse: Array<ImageBien>) => {
      // tslint:disable-next-line:prefer-for-of
      for (let i = 0; i < reponse.length; i++){
        // @ts-ignore
        const file = new File(reponse[i].picByte, reponse[i].name, reponse[i].picByte);
 
        console.log(file);
      }
      console.log(reponse);
    }, reponse => alert(this.error));
  }

Erreur:


pour tant, je récrée un fichier...
Dans l'attente de vos réponse, prenez soin de vous

[krakatoa]

sert à quoi la boucle for ?
est ce necessaire ?

[sahya]

je ne suis pas, du tout, un seniore...
Sachant que la longueur de mon Array n'est pas fix,
je voulais controler la longueur et les éléments qu'il le compose..
je suis à vide d'apprendre si vous avez un autre moyen, je suis preneur

[krakatoa]

ça donne quoi ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
 console.log(reponse.picByte);

[sahya]

je l'ai modifier

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

console.log(reponse[i].picByte);

[krakatoa]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
retrievedImage  = "";
...
...
 
 
          const base64Data = resonse.picByte;
          this.retrievedImage = 'data:image/jpeg;base64,' + base64Data;

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
        <div *ngIf=retrievedImage>
 
            <img [src]="retrievedImage">
 
        </div>

[sahya]

ça fonctionnnnn...
bon je doit encor pofiner la taille mais c'est trop goodddddddd....
je montre le code quand même

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
  retrievedImage: Array<string> = [];

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
rechercheImagesBien(): void{
    // tslint:disable-next-line:max-line-length
    this.imagService.rechercherParBienid(this.b).subscribe((reponse: Array<ImageBien>) => {
      // tslint:disable-next-line:prefer-for-of
      let tostring = '';
      // tslint:disable-next-line:prefer-for-of
      for (let i = 0; i < reponse.length; i++){
 
        tostring = 'data:image/jpeg;base64,' + reponse[i].picByte;
        this.retrievedImage.push(tostring);
      }
      console.log(this.retrievedImage);
    }, reponse => alert(this.error));
  }

et le html:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div class="carousel-inner" *ngFor="let c of retrievedImage">
            <div class="carousel-item active">
              <img class="d-block w-100" src="{{c}}" alt="First slide">
            </div>
          </div>

[sahya]

pq je suis obligé de le transformer en String.????
je ne vois pas le rapor.. et je n'aurai jamais trouvé seul

[krakatoa]

pour info, normalement on stocke les images sur un serveur

ensuite l'app angular par exemple accede à l'image via le lien du serveur

htttp://monserveur/images/monimage.jpg

[sahya]

je comprend ce que tu veux dire Mais..
pour mon TFE(travail de fin d'étude) je dois créer une apps de A-Z...
DB-API-CLIENT

mon apps doit etre 100% autonome