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
– Pablo Palacios, Commented Apr 15, 2017 at 21:14

Sajeetharan · Accepted Answer · 2017-04-15 20:23:22Z

0

Change

From

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

To

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

answered Apr 15, 2017 at 20:23

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

3 Comments

ANSHUL DAWAR Over a year ago

image link broke Console output: crib-6.jpg.jpg Failed to load resource: the server responded with a status of 404 (Not Found)

Sajeetharan Over a year ago

check if you have those images inside the specified path

ANSHUL DAWAR Over a year ago

actually it when i remove last .jpg AFTER {{place.image}} it was reading crib-1.jpg.jpg Thanks @Saheetharan

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related