GET http://localhost//images/Products/ 403 (Forbidden)

Question

I have a simple angularjs html page that is retreiving some images from an api call.

<div class="col-xs-12" >
    <h3>Product List</h3>
</div>
<div class="col-xs-12" ng-controller="productCtrl as ctrl" >
    <div class="well" ng-repeat="item in ctrl.products">
        <h3>
            <img style="float:left; height:80px; margin-right:10px" 
                ng-src="images/Products/{{item.Imagename  || '' }}" >
            <strong>{{item.Name}}</strong>
            <span class="pull-right label label-primary">
                {{item.Price | currency}}
            </span>
        </h3>
        <button ng-click="addProductToCart(item)" class="btn btn-success pull-right">
            Add to cart
        </button>
        <span class="small">{{item.Description}}</span>
    </div>
</div>

Everything works well and the data is displayed, however the images are not showing with a 403 forbidden error.

I tried to add permissions to IIS_IUSRS and Users(localPC) however I am still getting the same error.

Tried searching on Google and StackOverflow, however no solution solved my problem.

How can I solve this?

Thanks for your help and time.

Answer 1

Maybe this should work <img [..] ng-src="{{item.Imagename && 'images/Products/' + item.Imagename || '' }}" >

With this modification, the content is empty until the data arrives.