<img> 在ng-repeat生成的內部 <md-card> 不露面

Question

我在Angular Material的<md-card> <img>遇到了一個奇怪的問題：

• 我正在使用ng-repeat創建多個md-cards
• 數據來自Google Firebase： 鏈接
• 並非所有卡片都顯示圖像，只有第二張卡片顯示： 鏈接
• 在此處實時查看：dev.oster-holzhaus.de/#/holzbau（目前我不能包含兩個以上的鏈接）

我的代碼：

<md-content class='md-padding' layout="row" layout-wrap layout-align="center">
<md-card style="width: 400px;" ng-repeat="service in services">
    <img ng-src={{service.imagepath}} class="md-card-image">
    <md-card-title>
        <md-card-title-text>
            <span class="md-headline">{{service.title}}</span>
            <span class="md-subhead">{{service.subhead}}.</span>
        </md-card-title-text>
    </md-card-title>
    <md-card-content>
        <p>{{service.text}}</p>
    </md-card-content>
    <md-card-actions layout="row" layout-align="end center">
        <md-button>Test</md-button>
    </md-card-actions>
</md-card>
</md-content>

• 關鍵步驟在line 3 。
• 數據已正確提取，唯一的問題是圖像僅顯示在第二張卡上。
• 我嘗試切換到本地imagePath ，但得到了同樣奇怪的東西

有沒有人有類似的經歷，甚至可以解決我的問題？ 謝謝！

問候恩佐

Answer 1

請檢查通過service.imagepath圖像URL是否以正確格式出現在DOM上。

您可以通過在ng-repeat內的任何位置編寫{{service.imagepath}}進行檢查

Answer 2

如果您想要帶有圖像的卡片，則應使用md-card-title-media或將圖像放置在md-card-content -CodePen

標記

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
  <md-content class='md-padding' layout="row" layout-wrap layout-align="center">
    <md-card style="width: 400px;" ng-repeat="service in services">      
        <md-card-title>
            <md-card-title-text>
                <span class="md-headline">{{service.title}}</span>
                <span class="md-subhead">{{service.subhead}}.</span>
            </md-card-title-text>
          <md-card-title-media>
            <img ng-src={{service.imagepath}} class="md-card-image" style="width:150px;">
          </md-card-title-media>
        </md-card-title>
        <md-card-content>
            <img ng-src={{service.imagepath}} class="md-card-image" style="width:150px;">
            <p>{{service.text}}</p>
        </md-card-content>
        <md-card-actions layout="row" layout-align="end center">
            <md-button>Test</md-button>
        </md-card-actions>
    </md-card>
  </md-content>
</div>

JS

angular.module('MyApp',['ngMaterial', 'ngMessages'])

.controller('AppCtrl', function($scope) {
  $scope.services = [
    {title: "Cow", subhead: "Animal", imagepath: "https://upload.wikimedia.org/wikipedia/commons/0/0c/Cow_female_black_white.jpg"},
    {title: "Car", subhead: "Transport", imagepath: "http://i2.cdscdn.com/pdt2/2/6/2/1/700x700/nit0641243370262/rw/voiture-electrique-pour-enfant-2-x-30w-rouge.jpg"},
    {title: "House", subhead: "Building", imagepath: "http://www.smallworks.ca/wp-content/uploads/exterior11.jpg"}
  ];
});

Answer 3

我想到了。 我的標記確實有效，但是在“ imagePath” /“ imagepath”中出現拼寫錯誤，並且在代碼中也為{{service.imagepath}} （帶有小寫的p）。 因此，只能加載帶有“ imagepath”的第二個服務。

謝謝你們的努力！

問候恩佐