current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite

I have the following:

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 }}

The problem is in src="holder.js/{{fragment.dimension.width}}x{{fragment.dimension.height}}", i.e. even if looking at the resulting html I see a correct src (src="holder.js/300x200") it does not show the image. My guess is this is not how one uses angular variables inside attributes..

How can I make it work?

EDIT: it seems it does not execute holder.js.. here is the source: in the first call I used angular {{hash}} in the second I manually put 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>
share|improve this question
add comment

1 Answer

up vote 4 down vote

The documentation explains that quite clearly:

Using Angular markup like {{hash}} in a src 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.

So you must use:

<img ng-src="holder.js/{{fragment.dimension.width}}x{{fragment.dimension.height}}" />
share|improve this answer
    
It does not work, even if in the code I can see: <img ng-src="holder.js/1678x638" src="holder.js/1678x638"> –  fusio Aug 1 '13 at 14:25
    
Please create a jsFiddle which can reproduces the problem. –  Blackhole Aug 1 '13 at 14:25
    
Uhmm.. without jade it seems to be working.. might it be jade conflicting with angular? jsfiddle.net/vXA8b/2 (not sure how to make jade and angular work in jsfiddle) –  fusio Aug 1 '13 at 14:49
    
I don't know Jade at all, but it seems to have partly the same goal as AngularJS. Why use both? –  Blackhole Aug 1 '13 at 15:52
1  
But AngularJS is also a templating system, right ? Anyway, you'd better open a new question, I personnaly can't help more on this subject. –  Blackhole Aug 2 '13 at 14:35
show 1 more comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.