Angular：无法使用 ng-style 指令设置背景封面答案

【问题标题】：Angular: Unable to set the background cover using ng-style directiveAngular：无法使用 ng-style 指令设置背景封面
【发布时间】：2021-01-13 02:04:12
【问题描述】：

我一直在使用 ngStyle...

添加背景图片

<div class="modal-header" [ngStyle]="{
                    background: 'url(api/myfile' 
                    + filteredProducts[index].imageURL + ')'}">

但是，这个 css 无效

.modal-header {
    background-size: cover;
}

如果我直接使用普通的背景图片

.modal-header {
    background-size: cover;
    background-image: url('imageurl');
}

我试图以角度添加背景大小，但这只是尖叫错误，因为我必须将 background-size 放在引号中以便编译器接受它

[ngStyle]="{background: 'url(api/myfile?filename=' 
                    + filteredProducts[index].imageURL + ')', 'background-size': cover}"

我终于尝试使用此属性，但所有这些都失败了

[style.background-size]="cover"

这也没用

<div class="modal-header" [ngStyle]="
                {
                    'background-image': 'url(url'
                    + filteredProducts[index].imageURL+')', 
                    'background-size': 'cover',
                    'background-position': 'center'
                }
                ">

【问题讨论】：

标签： html css angular ng-style

【解决方案1】：

试试这个

<div class="modal-header" 
    [ngStyle]="{ 
       'background': 'url(api/myfile' + filteredProducts[index].imageURL + ') 
        no-repeat center center / cover' }">

【讨论】：

【解决方案2】：

这是我在做的时候注意到的

var imgurl = 'api/myfile' + imageURL; 
console.log(imgurl);

这是输出
api/myfile imageURL

变量之间有空格
我尝试使用它，但如果文件名有空格，则需要空格

var myRemoveSpaceAll = miner.replace(/ /g,'');

这就是我所采取的措施

 <div class="modal-header" [ngStyle]="
            {
             'background-image': 'url('+setstring(filteredProducts[index].imageURL)+')', 
             'background-size': 'cover',
             'background-position': 'center'
            }
 ">

 setstring(myfilename){
    var replacedstring = myfilename.replace(/ /g,'%20');
    var finalURL = "api/myfile" + replacedstring ;
    return finalURL ;
  }

【讨论】：