I have Jade markup looking like this:
li(ng-repeat="parcel in parcels | filter : filterActiveAreaParcels")
.parcel-image(style="background-image:url({{parcel.image}});")
For some reason sometimes I get 404 error while it tries to retrieve http://localhost:3501/%7B%7Bparcel.image%7D%7D, It doesn't happen all the time, but sometimes. Though all images are being retrieved and shown on the page properly.
What can be the problem here?
http://localhost:3501/%7B%7Bparcel.image%7D%7D is http://localhost:3501/{{parcel.image}}
Remember, the HTML is actually in the DOM when angular compiles it. So your browser is (for a brief moment, before the app bootstraps), having something like this in the DOM:
<div class="parcel-image" style="background-image:url({{parcel.image}})">...</div>
And when it see the style property, it's hitting your server with /{{parcel.image}}.
That's why you're getting the occasional 404 there.
EDIT: You can use the ngStyle directive to get around this:
The ngStyle directive will watch an object and apply the styles it contains.
So in your html:
<div class="parcel-image" ng-style="styles">...</div>
And in your controller:
app.controller('ParcelImageController', function($scope) {
$scope.parcel = {/*some object*/};
$scope.style = {
'background-image': 'url(' + $scope.parcel.image + ')'
};
});