Question

我在Angular Material的<img> <md-card>中遇到了md-cards的奇怪问题：

我正在使用ng-repeat

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

数据来自Google Firebase：Link
并非所有卡片都显示图片，只有第二张卡片显示图片：Link
现场观看：dev.oster-holzhaus.de/#/holzbau（目前我不能包含两个以上的链接）

我的代码：

line 3

关键步骤是imagePath。
正确拉出数据，唯一的问题是图像只显示在第二张卡上。
我尝试切换到本地xcopy src\main\Publish\Appfolder\*.* /s src\main\Publish\，但得到了同样奇怪的事情

有没有人有类似的经历，甚至可以解决我的问题？谢谢！

此致恩佐

Answer 1

请检查通过service.imagepath的图片网址是否以正确的格式显示在DOM上。

您可以在{{service.imagepath}}

内的任何位置写ng-repeat进行检查

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”的第二个服务。

谢谢你的努力伙计！

此致恩佐

{-0}}在ng-repeat生成的<md-card>内部出现{0}}

3 个答案: