css - Angular NgStyle : list image style

Question

我的组件中有一个像这样的数组，其中包含名称和图像路径。

 skills = [
    {name: 'HTML5', iconSrc: 'src/assets/images/html-5 min.png'},
    {name: 'CSS3', iconSrc: 'src/assets/images/css-3 min.png'},
    {name: 'UML', iconSrc: 'src/assets/images/hierarchical-structure min.png'},
    {name: 'Javascript', iconSrc: 'src/assets/images/javascript min.png'},
    {name: 'PHP', iconSrc: 'src/assets/images/php min.png'},
    {name: '.NET', iconSrc : 'src/assets/images/hashtag min .png'}
  ];

我想创建一个循环，可以在样式属性“list-style-image”中使用 iconSrc 中的路径我试过了，但没用

<li *ngFor="let skill of skills" [ngStyle]="{'list-style-image': 'url({{skill.iconSrc}})'}">{{skill.name}}</li>

或者类似的东西

<li *ngFor="let skill of skills" style="list-style-image: url("{{skill.name}}")">{{skill.name}}</li>

我可以做什么来解决这个问题？

Answer 1

这是因为您的图像网址中有空格，因此您需要在网址两边使用引号。 <li *ngFor="let skill of skills" [ngStyle]="{'list-style-image': 'url(\'' + skill.iconSrc + '\')'}">{{skill.name}}</li>