Afficher une image en base64 depuis JSON

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:

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:

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:

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

Code:

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 !

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

Résolution du problème

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:

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:

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 !