Angular: 无法使用 ng-style 指令设置背景覆盖

Question

我一直在使用 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');
}

我试图在 angular 中添加背景大小，但这只是错误的尖叫，因为我必须将 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'
                }
                ">

Answer 1

试试这个

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

Answer 2

这是我做的时候注意到的

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

这是输出
api/myfile imageURL

变量之间有一个space
我尝试使用它，但如果文件名有 spaces

，则需要白色 space

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 ;
  }

Angular: 无法使用 ng-style 指令设置背景覆盖

Angular: Unable to set the background cover using ng-style directive

html

css

ng-style

angular