Getting error with ng-if in angularjs
I am using the tag ng-if
in my application but it seems to be throwing an error on page load.
This 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 the page is loaded or when I reload, it shows the following 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 a problem with ng-if
? It looks good when running in a browser, but when I load the console in my google chrome I see some of these aforementioned weird errors. Any solutions?
source to share
To avoid the browser eagerly fetching the image from a not yet interpolated url eg. src="{{some.url}}"
(which results in an HTTP error), you should use ng-src
:
<img ng-src="{{PostDetail.attachments[0].images.square1.url}}">
As for yours ng-if
, it looks like it protects against null PostDetail.attachments[0].url
- are you sure you don't mean it PostDetail.attachments[0].images.square1.url
?
source to share