javascript 在 AngularJS 中的 HTML img src 中使用字符串连接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33637347/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using string concatenation within HTML img src in AngularJS
提问by user3788671
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.
我正在使用 YouTube API v3 从播放列表中提取视频。每个视频 JSON 对象都有一个 videoId。我正在尝试使用 videoId 在带有 Angular 的 img 元素中构建 src 属性。
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.com/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?
如何在 img html 元素的 src 属性中连接以下字符串？
"http://img.youtube.com/vi/" + video.resourceId.videoId + "/hqdefault.jpg"
" http://img.youtube.com/vi/" + video.resourceId.videoId + "/hqdefault.jpg"
回答by Ran Sasportas
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.
使用 ng-src 指令而不是图像元素的原始 src 属性，ng-src 指令将识别字符串插值并将其应用于 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.
祝你好运。
