Display image in AngularJS

Question

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'">
    <h3>{{family.category}}</h3>
    <div class="img-wrap">
        <img ng-src="{{family.image}}"/>
    </div>
</li>

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

possible duplicate of Understanding AngularJS ng-src

Oyeme
– Oyeme

2015-09-28 15:03:15 +00:00
Commented Sep 28, 2015 at 15:03 — Oyeme
– Oyeme, Commented Sep 28, 2015 at 15:03

Praveen Prasad · Accepted Answer · 2015-09-28 15:03:16Z

2

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 Sep 28, 2015 at 15:03

Praveen Prasad

2,0133 gold badges16 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adjit Over a year ago

Actually... this is right, yeah I was pointing to my un-updated JSON file, so it wasn't fetching any url's. Thanks for helping me realize that

Collectives™ on Stack Overflow

Display image in AngularJS

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related