Question

我有一个for循环显示图像。图像是其容器的背景图像。

图像在for循环的每次迭代中都会发生变化。

代码：

<div class="row">
      <h4 id="rooms"><strong>Rooms</strong></h4>
      <button id="roomlinkbutton" class="linkbutton">+Room</button>
    </div>
    <div class="row" id="roomsrow"> <!--room row-->
      <div *ngFor="let room of venueprofileobject.rooms; let i=index" class="col-md-4"> <!--room item-->
        <div class="imagecontainer img-responsive imagefullheight"
             [style]=" background-image: url(room.image[0]);">
        </div>
        <h5 class="roomnameprivacy"><strong>{{room.name}} | {{room.privacy}}</strong></h5>
        <button (click)="deleteroom(i)" class="deleteroom btn-danger">Delete</button>
      </div> <!--room item-->

持有图片的代码：

rooms:[
      {
        pk: 1,
        name: 'no',
        description: 'no',
        privacy: 'yeah',
        image: ['nifty porno image'],
        seatedcapacity: 2,
        standingcapacity: 2,
        amenities:['k'],
        setuptypes:['k'],
        filtercompliantroom: false
      },
    ]

但我不确定如何将背景图片网址值与图片位置绑定。

我试过

style=" background-image: url({{room.image[0]}});">失败了

[style]=" background-image: url(room.image[0]);">也失败了

[style.background-image]="url(room.image[0])"也失败了

[ngStyle]="{'background-image': 'url('room.image[0]')'}"失败

建议？

目前正在查看此页面，看看我是否能找到答案：https://www.concretepage.com/angular-2/angular-2-ngstyle-and-style-binding-example

Answer 1

这很可能是由于Angular的内置功能可以防止跨站点脚本。请看这个链接：https://angular.io/guide/security#xss

<强>更新

我能够使用这样的语法：

<div class="row" [ngStyle]="{'background-image': 'url(' + imageUrl + ')'}">

这使用ngStyle属性，即“安全”而不是style属性。

这就是你需要的样子：

<div class="row" [ngStyle]="{'background-image': 'url(' + room.image[0] + ')'}">

冒号（:)右边的语法基本上是构建一个字符串，因此你需要添加“+”来连接样式文本（例如'url'）和组件属性中的值。 / p>

属性绑定到样式

1 个答案: