Utilizzo della concatenazione di stringhe all'interno di HTML img src in AngularJS

Question

Sto prelevando video da una playlist con l'API di YouTube v3. Ogni oggetto JSON video ha un ID video. Sto cercando di utilizzare il videoId per creare l'attributo src nell'elemento img con Angular.

Questo è quello che ho attualmente:

<table id="playlistvideostable" class="table table-responsive table-striped"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Thumbnail</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="video in playlistvideos"> 
      <td> 
       {{video.snippet.title}} 
      </td> 
      <td> 
       <img src="http://img.youtube.com/vi/{{video.resourceId.videoId}}/hqdefault.jpg" alt="Video Thumbnail" class="img-responsive"/> 
      </td> 
     </tr> 
    </tbody> 
</table> 

Come posso concatenare le seguenti stringhe nel attributo src dell'elemento IMG html?

"http://img.youtube.com/vi/" + video.resourceId.videoId + "/hqdefault.jpg"

Answer 1

utilizzare la direttiva ng-src anziché l'attributo src originale dell'elemento dell'immagine, la direttiva ng-src riconoscerà la stringa interpolazione e applicarlo sul dom.

nel tuo caso -

<img ng-src="http://img.youtube.com/vi/{{video.resourceId.videoId}}/hqdefault.jpg" alt="Video Thumbnail" class="img-responsive"/> 

buona fortuna.