Getting error with ng-if in angularjs

Question

I am using ng-if tag in my app, but it seems like when I load the page, it throws an error.

Here is how my code looks like

<ons-col width="95px">
              <img src="{{PostDetail.attachments[0].images.square1.url}}" class="thumbnail" ng-if="PostDetail.attachments[0].url != null">
              <img src="images/location1.png" class="thumbnail" ng-if="PostDetail.attachments[0].url == null">
</ons-col>

When a page loads or when I reload it shows this below error:

GET file://localhost/Volumes/Work%20Data/Development/Come%20to%20woodstock%20Ic…o%20Woodstock/www/%7B%7BPostDetail.attachments[0].images.square1.url%7D%7D net::ERR_FILE_NOT_FOUND

Is there any problem in the ng-if? It looks good while it works on browser, but when I load the console in my google chrome, I can see some of these above mentioned weird errors. Any solutions?

Accessing localhost over a file:// url?

Dan Prince
– Dan Prince

2015-04-25 10:04:34 +00:00
Commented Apr 25, 2015 at 10:04 — Dan Prince
– Dan Prince, Commented Apr 25, 2015 at 10:04

New Dev · Accepted Answer · 2015-04-25 09:59:19Z

6

To avoid a browser eagerly retrieving the image from a not-yet-interpolated URL, e.g. src="{{some.url}}" (thus resulting in HTTP error), you should use ng-src:

<img ng-src="{{PostDetail.attachments[0].images.square1.url}}">

As for your ng-if, it seems to guard against a null PostDetail.attachments[0].url - are you sure you didn't mean PostDetail.attachments[0].images.square1.url?

answered Apr 25, 2015 at 9:59

New Dev

49.8k12 gold badges99 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user3201500 Over a year ago

Awesome it worked great...i was making some silly mistake here. i just realized. Can you please help me with ons-navigator problem too?

New Dev Over a year ago

@user3201500, what is the problem with ons-navigator? But you should probably ask a separate question

user3201500 Over a year ago

Yes i asked a seperate question. stackoverflow.com/questions/29861875/… here is the question

New Dev Over a year ago

@user3201500, I'll take a look, although I'm not familiar with onsen.

user3201500 Over a year ago

I just asked it. So stackoverflow wants me to wait for 6 more min to accept your answer.

Collectives™ on Stack Overflow

Getting error with ng-if in angularjs

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related