CODEWITHSUNDEEP
javascriptangularjs
Rani Radcliff
Rani Radcliff

Reputation: 5084

Angular - Images won't show

I have data coming from my database. Each record has an image path. I'm trying to show the image using the path but the images will not show.

Here is my controller:

angular.module('myModule').controller('ContractorCtrl', function ($scope, $interval, $window) {

    $scope.items = [
   "ContractorWidget/yellow_triangle.png",
   "ContractorWidget/yellow_triangle.png",
   "ContractorWidget/yellow_triangle.png",
   "ContractorWidget/yellow_triangle.png",
   "ContractorWidget/yellow_triangle.png",
   "ContractorWidget/red_cross.png"

    ];

});

Here is my HTML:

<

div ng-app="myModule" ng-controller="ContractorCtrl">
<div class="newWidget">
            <ul class="grid-wrap one-whole">
                <li ng-repeat="item in items" class="grid-col one-quarter">
                    <div>
                        <img ng-src="~/Images/{{item}}" />
                    </div>
                </li>
            </ul>

        </div>
    </div>

I tried using both "src" and "ng-src" but neither works. Any ideas as to what I am missing here?

Any assistance is greatly appreciated!

Upvotes: 2

Views: 188

Answers (2)

Michel
Michel

Reputation: 28239

Your ng-repeat with an array is not working because you have duplicate items.

Use track by $index :

<li ng-repeat="item in items track by $index" class="grid-col one-quarter">
    <img ng-src="~/Images/{{item}}" />
</li>

Modifying the json is a way to get around the problem, as objects in the array have distinct references, even if the values are the same.

Upvotes: 1

Joe Lloyd
Joe Lloyd

Reputation: 22323

Mod Your JSON

 $scope.items = [
  {url: "ContractorWidget/yellow_triangle.png"},
  {url: "ContractorWidget/yellow_triangle.png"},
  {url: "ContractorWidget/yellow_triangle.png"},
  {url: "ContractorWidget/yellow_triangle.png"}
];

Then in html

<li ng-repeat="item in items" class="grid-col one-quarter">
      <div>
           <img ng-src="~/Images/{{item.url}}" />
      </div>
</li>

Upvotes: 2

Related Questions