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

Using string concatenation within HTML img src in AngularJS

本文关键字：src 字符串 img 连接 HTML AngularJS      更新时间：2023-09-26

我正在使用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属性，ng-src指示将识别字符串插值并将其应用于dom。

在您的情况下-

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

祝你好运。

相关文章：