在angularjs中使用ng-if获取错误

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?

Answer 1

To avoid a browser eagerly retrieving the image from a not-yet-interpolated URL, eg 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 ?