我有以下几点:
div.container
script(src='/js/bootstrap/holder.js')
p.text-info(ng-pluralize,
count="devices.length",
when="{ '0': 'There are no fragments.', 'one': 'There is 1 fragment.', 'other': 'There are {} fragments.'}")
ul.unstyled(ng-repeat='fragment in devices')
ul.thumbnails
li.span
div.thumbnail
img(src="holder.js/{{fragment.dimension.width}}x{{fragment.dimension.height}}")
div.caption
h3 {{fragment.name}}
p {{fragment.dimension}}
ul.unstyled(ng-repeat='component in fragment.components')
li {{ component.name }}
问题出在
src="holder.js/{{fragment.dimension.width}}x{{fragment.dimension.height}}"
,即即使查看生成的 html 我看到正确的 src ( src="holder.js/300x200"
) 它也不会显示图像。我的猜测是这不是在属性中使用 Angular 变量的方式..我怎样才能让它工作?
编辑:
好像没有执行
holder.js
..这是来源:在第一个调用中我使用了 angular {{hash}} 在第二个中我手动放置了
holder.js/300x200
<div class="thumbnail">
<img src="holder.js/1678x638">
<img src="data:image/png;base64,iVBORw0KG...ElFTkSuQmCC" data-src="holder.js/300x200" alt="300x200" style="width: 300px; height: 200px;">
</div>
最佳答案
documentation非常清楚地解释了这一点:
Using Angular markup like
{{hash}}
in asrc
attribute doesn't work right: The browser will fetch from the URL with the literal text{{hash}}
until Angular replaces the expression inside{{hash}}
. The ngSrc directive solves this problem.
所以你必须使用:
<img ng-src="holder.js/{{fragment.dimension.width}}x{{fragment.dimension.height}}" />
关于variables - 在 angularjs 的 src 属性中使用 ng-repeat 变量?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17996515/