Geek Answers Handbook

Using string concatenation in HTML img src in AngularJS

I am shooting a video from a playlist with the YouTube v3 API. Each JSON video object has a videoId. I am trying to use videoId to assemble the src attribute in an img element using Angular.

This is what I have:

<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>

How can I concatenate the following lines in the src attribute of an img html element?

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

+6
source share
1 answer

use the ng-src directive instead of the original src attribute of the image element, the ng-src directive recognizes line interpolation and applies it to dom.

in your case -

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

good luck.

+6
source

More articles:


All Articles