Discussion :

[Alatus71]

Bonjour,

Etant novice en AngularJS, j'aurais besoin d'aide afin de pouvoir afficher une image convertie en base64.

Voici mon code PHP me permettant de binder le nom, prénom et photo d'une personne :

Code PHP :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function getUsers() {
 
    $sql = "SELECT nom, prenom, photo FROM utilisateur";
    try {
        $db = getConnection();
        $stmt = $db->query($sql);
        $product = $stmt->fetchAll(PDO::FETCH_ASSOC);
        var_dump($product);
        for($i=0; $i<sizeof($product); $i++){
            if (strpos($product[$i]['photo'],"PNG") !== false){
        $image = imagecreatefromstring($product[$i]['photo']); 
        ob_start();
        imagejpeg($image, null, 80);
        $data = ob_get_contents();
        ob_end_clean();
        $product[$i]['photo'] = base64_encode($data);
            }
        }
        $db = null;
        echo json_encode($data);
    }
    catch (PDOException $e) {
        echo '{"error":{"text":' . $e->getMessage() . '}}';
    }
}

Le résultat en JSON est me parait cohérent :

Code :

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

1
2
3
4
5
6
7
8
9
4 => 
    array (size=3)
      'nom' => string 'NOM' (length=3)
      'prenom' => string 'PRENOM' (length=6)
      'photo' => string '‰PNG

���
IHDR���¯��
���õ… è���
sRGB�®Îé���gAMA��±üa���	pHYs��Ã��Ã
Ço¨d��ÿ¥IDATx^Lý…’ciš¥Ç-œ™žžîªJvfv—Kr13333K.gfÆ`æ䬬ʬjœcgfÌþúקU3aÉÚk¿ïZé†Þ—6:¢*£/R�©DfÐÝV§×îö»}Ao è
[...]Ê`©x¶Ù8Ý'... (length=113194)

Puis, du côté de l'AngularJS, une simple fonction GET pour récupérer les éléments :

Code JS :

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

1
2
3
4
$http.get(url)
        .success(function(resultat) {
          $scope.users = resultat;
      });

Code HTML :

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

1
2
3
4
5
6
 
<tr class="trtable" ng-repeat="user in users">
      <td>{{user.nom}}</td>
      <td>{{user.prenom}}</td>
       <td><img data-ng-src="data:image/png;base64,{{user.photo}}"</td>
</tr>

Toutefois, il ne m'affiche rien du côté html... Et m'indique même une erreur au niveau du ng-repeat ([ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: user in users....).
Mon ng-repeat me semble plus que correct, car lorsque je ne bind pas la photo, il ne me met plus l'erreur et m'affiche bel et bien le nom et prénom des personnes.
Auriez-vous une petite idée d'où vient le soucis svp?

Merci par avance !

[mathieu]

la balise "img" n'est peut-être pas bien fermée ?

[Alatus71]

Bonjour !

Oui, effectivement la balise était mal fermée mais l'erreur ne venait pas de la !
J'ai été un peu trop loin dans ma réflexion. Je vous met la résolution de cette erreur :

Code PHP :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
try {
        $db = getConnection2();
        $stmt = $db->query($sql);
        $product = $stmt->fetchAll(PDO::FETCH_ASSOC);
 
        for($i=0; $i<sizeof($product); $i++){
            if (strpos($product[$i]['photo'],"PNG") !== false){
                $product[$i]['photo'] = base64_encode($product[$i]['photo']);
            }
        }
 
        $db = null;
        echo json_encode($product);

Puis en HTML / AngularJS :

Code :

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

1
2
3
4
5
6
7
<tbody>
               <tr class="trtable" ng-repeat="user in users">
                  <td>{{user.nom}}</td>
                  <td>{{user.prenom}}</td>
                  <td><img class="user_photo" data-ng-src="data:image/png;base64,{{user.photo}}"/></td>
               </tr>
           </tbody>

Bonne journée, au plaisir !