Question

我正在使用AngularJS从JSON文件中读取图像数据，该文件适用于除图像之外的其他数据。 ng-src没有抓取任何图片？

我需要将所有图像加载到div并填充我使用ng-repeat读取的图像数据的src，alt和title属性，但它不起作用。会发生什么？

然后，我不确定代码设置的工作方式？

这些是我的代码 -

   <!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>

我的json数据

    [
  {
    "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
            }
        });    
    })();

Answer 1

更改

发件人

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

要

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

来自JSON文件的AngularJS图像无法使用ng-src加载如何显示图像

1 个答案: