在 AngularJS 的 HTML img src 中使用字符串连接答案

【问题标题】：Using string concatenation within HTML img src in AngularJS在 AngularJS 的 HTML img src 中使用字符串连接
【发布时间】：2016-02-11 18:21:18
【问题描述】：

我正在使用 YouTube API v3 从播放列表中提取视频。每个视频 JSON 对象都有一个 videoId。我正在尝试使用 videoId 在带有 Angular 的 img 元素中构建 src 属性。

这是我目前拥有的：

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

如何在 img html 元素的 src 属性中连接以下字符串？

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

【问题讨论】：

我认为 ng-src 而不是 src 应该可以解决问题
它不是按照您上面显示的方式工作吗？会发生什么？
它应该对我的朋友有用。你做得很好

标签： javascript jquery html angularjs youtube

【解决方案1】：

使用 ng-src 指令代替图像元素的原始 src 属性，ng-src 指令将识别字符串插值并将其应用于 dom。

在你的情况下 -

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

祝你好运。

【讨论】：