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です..ここにソースがあります:最初の呼び出しでは、手動で配置した2番目の呼び出しで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>
4

1 に答える 1

9

ドキュメントはそれを非常に明確に説明しています：

{{hash}}属性のようにAngular マークアップを使用srcすると正しく動作しません{{hash}}。Angular が 内の式を置き換えるまで、ブラウザは URL からリテラル テキストを取得します{{hash}}。ngSrc ディレクティブはこの問題を解決します。

したがって、次を使用する必要があります。

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