AngularJS Images from JSON file would not load using ng-src how to display image

Question

I am using AngularJS to read image data from a JSON file, which works for other data except images. ng-src is not fetching any image?

I need to load all the images to the div and populate the src, alt, and title attributes of the image data I read in using ng-repeat, however it does not work. What happen?

Then, I am not sure the way the code is setup works?

These are my code-

   <!DOCTYPE html>
    <html ng-app="store">
    <head>
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
    </head>

    <body ng-controller = "storeController">
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>

        <!--<button class="btn btn-primary" ng-click="showMessage = !showMessage">Toggle Message</button>
        <h2 ng-show="showMessage == true">Secret Message</h2>
        <input type="text" placeholder="Leave a Message" ng-model="message">
        <h2>{{ message }}</h2>-->

        <div class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                <a class="navbar-brand" href="#">ngPlaces</a>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="col-sm-4" ng-repeat = "place in places">
                <div class="thumbnail">
              <img ng-src="images/{{cribs.image}}.jpg" alt="">
                    <div class="caption">   
                        <h3>{{place.address}}</h3>
                        <p><strong>Type:</strong>{{place.type}}</p>
                        <p><strong>Description:</strong>{{place.description}}</p>
                        <p><strong>Price:</strong>{{place.price | currency}}</p>
                    </div>
                </div>
            </div> 
        </div>
        </body>
    </html>

my json data

    [
  {
    "id": 1,
    "type": "Condo",
    "price": 220000,
    "address": "213 Grove Street",
    "description": "Excellent place, really nice view!",
    "details": {
      "bedrooms": 2,
      "bathrooms": 1.5,
      "area": 921 
    },
    "image":"crib-1"
  },
  {
    "id": 2,
    "type": "House",
    "price": 410500,
    "address": "7823 Winding Way",
    "description": "Beautiful home with lots of space for a large family.",
    "details": {
      "bedrooms": 4,
      "bathrooms": 3,
      "area": 2145 
    },
    "image":"crib-2"
  },
  {
    "id": 3,
    "type": "Duplex",
    "price": 395000,
    "address": "834 River Lane",
    "description": "Great neighbourhood and lot's of nice green space.",
    "details": {
      "bedrooms": 3,
      "bathrooms": 2.5,
      "area": 1500 
    },
    "image":"crib-3"
  },
  {
    "id": 4,
    "type": "House",
    "price": 755990,
    "address": "7807 Forest Avenue",
    "description": "Best house on the block!",
    "details": {
      "bedrooms": 6,
      "bathrooms": 4.5,
      "area": 3230 
    },
    "image":"crib-4"
  },
  {
    "id": 5,
    "type": "Condo",
    "price": 210500,
    "address": "1857 Andover Court",
    "description": "Nice little condo with room to grow.",
    "details": {
      "bedrooms": 2,
      "bathrooms": 1.5,
      "area": 1023 
    },
    "image":"crib-5"
  },
  {
    "id": 6,
    "type": "House",
    "price": 334900,
    "address": "7398 East Avenue",
    "description": "You'll love the view!",
    "details": {
      "bedrooms": 4,
      "bathrooms": 2.5,
      "area": 1788 
    },
    "image":"crib-6"
  }
]

app.js

(function(){

var app = angular.module('store', []);
    app.controller('storeController', function($scope, placesFactory){
        $scope.places;

        placesFactory.getPlaces().then(function(response){
           $scope.places = response.data; 
        });

        $scope.sayHello = function(){
            console.log("Hello");
        }
    });

        app.factory('placesFactory', function($http){

            function getPlaces(){
                return $http.get('data.json');
            }

            return {
                getPlaces: getPlaces
            }
        });    
    })();

Have you tried looking at the chrome debugger on the sources/network tabs. You should get an idea of why the images are not loading, like maybe your are not building the url as it should. Check the network tab, you should see the 404s there. — Pablo Palacios

Sajeetharan Sajeetharan · Accepted Answer · 2017-04-15T20:23:22

Change

From

  <img ng-src="images/{{cribs.image}}.jpg" alt="">

To

  <img ng-src="images/{{place.image}}.jpg" alt="">

AngularJS Images from JSON file would not load using ng-src how to display image

1 Answers