Question

<md-grid-list
                md-cols-sm="2" md-cols-md="2" md-cols-gt-md="6"
                md-row-height-gt-md="1:1" md-row-height="2:2"
                md-gutter="4px" md-gutter-gt-sm="4px">
            <md-grid-tile ng-repeat="candidate in records"
                          md-rowspan="1"
                          md-colspan="1"
                          md-colspan-sm="1">
                <md-grid-tile-header>
                    <md-checkbox class="md-primary"><h3>{{candidate.name}}</h3></md-checkbox>
                </md-grid-tile-header>
                <figure>
                    <img ng-src="/templates/img/{{candidate.image}}" width="100%" height="100%">
                </figure>
                <md-grid-tile-footer>
                    <h3 ng-if="candidate.title == -1">{{candidate.date}}</h3>

                    <h3 ng-if="candidate.title == 0" style="color: #e42012;"><i class="icon ion-close"></i></h3>

                    <h3 ng-if="candidate.title == 1" style="color: #28a54c;"><i class="icon ion-checkmark"></i></h3>

                </md-grid-tile-footer>
            </md-grid-tile>
        </md-grid-list>

上面的代码显示我使用的实现显示了带有ionicframework和angular材质的图像网格列表。问题是，当我在移动设备上运行时，没有图像被显示，但在桌面Chrome中它显示图像。任何人都可以告诉我问题我有这个代码或我错误地使用这些标签。

谢谢。

Answer 1

我遇到了类似的问题，桌面浏览器显示图像不一致 - 有时候有时候看不出来 - 但所有其他浏览器每次都显示图像。

原因是指定图像标签内的图像尺寸似乎与材料设计相冲突。

String value = new String(resultString.getBytes("SHIFT-JIS"), "UTF-8")

材料设计示例＆＃39;动态计算风格

<figure>
   <img ng-src="/templates/img/{{candidate.image}}" width="100%" height="100%">
</figure>

在css中指定图像尺寸应该允许图像显示正常工作。

style="left: calc(((33.3333333333333% - 0.666666666666667em) + 1em) * 1); width: calc(((33.3333333333333% - 0.666666666666667em) * 1) + 0em); padding-top: calc(((25% - 0.666666666666667em) * 1) + 0em); margin-top: calc(((25% - 0.666666666666667em) + 1em) * 0);"

md-grid-list不会在android中显示图像

1 个答案: