Question

需要在每张卡片上显示背景图片，其中的网址来自数据集本身，如下所示。 col内的内容正确显示，但未设置背景图像。有谁能说出来？

<div class="card" style="background-image: url({{prod.ImageUrl}})" ng-repeat="prod in prods">
    <div class="item">
        <div class="row">
            <div class="col">
                {{prod.ImageUrl}}<br/>
                {{prod.Name}}<br/>
            </div>
        </div>
    </div>
</div>

Answer 1

您不应该使用style属性，而应使用ng-style指令，如下所示：

ng-style="{'background-image':'url(' + prod.ImageUrl + ')'}"

有关更多信息，请参见背景图片的特定情况please check this post

编辑1：提供了（工作）plunk

编辑2：由于plnkr网站暂时停止，这里是working fiddle

编辑3：modified fiddle（见评论）

此外，移动到项目后，png图像不会显示在背景中

默认情况下，css background-image属性不会继承。可以使用其他属性更改此内容：background-image: inherit;

<div class="col" ng-style="{'background-image':'url(' + prod.ImageUrl + ')'}" style="border:1px solid black; width:48px;height:48px">

将ng-style放在col上，我希望你能期望它。

注意我给它的图像尺寸相同，因为，我同意你的看法，图像重复并不那么酷。

To learn more about the scaling of background images with css

如何显示每个ng-repeat项目的背景图像

1 个答案: