I have been adding a background image using ngStyle...
<div class="modal-header" [ngStyle]="{
background: 'url(api/myfile'
+ filteredProducts[index].imageURL + ')'}">
However, this css is invalidated
.modal-header {
background-size: cover;
}
If I use a normal background image directly
.modal-header {
background-size: cover;
background-image: url('imageurl');
}
I have tried to add a background size in angular but this just screams wrong because I had to put background-size in quotes for the compiler to accept it
[ngStyle]="{background: 'url(api/myfile?filename='
+ filteredProducts[index].imageURL + ')', 'background-size': cover}"
I finally tried using this property but all these failed
[style.background-size]="cover"
This too did not work
<div class="modal-header" [ngStyle]="
{
'background-image': 'url(url'
+ filteredProducts[index].imageURL+')',
'background-size': 'cover',
'background-position': 'center'
}
">
Here is what I noticed when I did
This was the output
api/myfile imageURL
there was a space between the variables
I tried to use this but the white space was required in case the file name has spaces
This was what I resorted to