I am pulling videos from a playlist with the YouTube API v3. Each video JSON object has a videoId. I am trying to use the videoId to build the src attribute in the img element with Angular.

This is what I currently 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="/{{video.resourceId.videoId}}/hqdefault.jpg" alt="Video Thumbnail" class="img-responsive"/>
            </td>
        </tr>
    </tbody>
</table>

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

"/" + video.resourceId.videoId + "/hqdefault.jpg"

I am pulling videos from a playlist with the YouTube API v3. Each video JSON object has a videoId. I am trying to use the videoId to build the src attribute in the img element with Angular.

This is what I currently 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./vi/{{video.resourceId.videoId}}/hqdefault.jpg" alt="Video Thumbnail" class="img-responsive"/>
            </td>
        </tr>
    </tbody>
</table>

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

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

• javascript
• jquery
• html
• angularjs
• youtube

• I think ng-src instead of src should do the trick – RVandersteen Commented Nov 10, 2015 at 18:53
• isn't it working the way you shown above ? what happens ? – Nelson Teixeira Commented Nov 10, 2015 at 18:54
• it supposed to work my friend. you do it fine – Yalin Commented Nov 10, 2015 at 18:55

1 Answer 1

use the ng-src directive instead of the original src attribute of the image element, the ng-src directive will recognize the string interpolation and apply it on the dom.

in your case -

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

good luck.