Display image in AngularJS


Not sure why my image’s aren’t being loaded by angular, here’s what I’ve got:

<li class="list-group-item" ng-repeat="family in product.families | orderBy:'category'">
    <div class="img-wrap">
        <img ng-src="{{family.image}}"/>

family.category works, but my ng-src does not seem to be. When I look in the HTML of the loaded page all I see is <img ng-src>

JSON Sytnax

"families": [
      "category": "Tablets",
      "image": "images/tablet.png"

You can take a look at the live version of this here


Make sure image url is correct, try complete image url in json.

In chrome dev tools-> network check which url it in invoking.

I have low reputation can’t comment.

Answered By – Praveen Prasad

Answer Checked By – David Goodson (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.