6

我有以下内容：

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")，它也不会显示图像。我的猜测是，这不是在属性中使用角度变量的方式。

我怎样才能让它工作？

编辑：它似乎没有执行holder.js..这里是来源：在第一次调用中，我在第二次调用中使用了角度 {{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>
4

1 回答 1

9

该文档非常清楚地解释了这一点：

{{hash}}像在属性中那样使用 Angular 标记是src行不通的：浏览器将从带有文字文本的 URL 中获取，{{hash}}直到 Angular 替换内部的表达式{{hash}}。ngSrc 指令解决了这个问题。

所以你必须使用：

<img ng-src="holder.js/{{fragment.dimension.width}}x{{fragment.dimension.height}}" />
于 2013-08-01T14:15:26.127 回答