如何在背景图像url离子中加入动态图像路径

Question

我试图加以静态路径，该路径将是静态的，而动态路径是图像的路径，当我在路径之间添加 时，我就会得到语法错误我尝试了这个

<div *ngFor="let cat of Cat" class="cus-col" style="background-image: url( 'Static Image Url'  '+ Dynamic Image Url'  ) ">}
        <div class="cus-text">
          <h4>{{cat.name}}</h4>
        </div>
      </div>

Answer 1

由于您使用的是离子，因此应使用Angular ngStyle 指令来设置元素样式。

此示例设置了具有动态URL的DIV的背景图像：

<div [ngStyle]="{'background-image': 'url(' + dynamicVariable + ')'}"></<div>

此示例设置了具有静态和动态URL的DIV的背景图像：

<div [ngStyle]="{'background-image': 'url(https://www.example.com/images/' + dynamicVariable + ')'}"></<div>

您可以在这里了解更多信息：

https://codecraft.tv/courses/angular/built/built-in-directives/ngstyle-and-and-ngclass/