I am trying to set an image as the background in a span tag using Angular:
.iti-flag {
display: inline-block;
width: 20px;
height: 15px;
margin-right: 5px;
background-image: url("src/assets/img/flags/flags.png");
background-repeat: no-repeat;
background-color: #dbdbdb;
background-position: 20px 0;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2 / 1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {
.iti-flag {
background-image: url("src/assets/img/flags/flags.png");
}
}
Here is the code for my span tag where I want the image as the background:
<span [class]="'iti-flag iti-flag-selected ' + selectedCountry.flagClass" matPrefix></span>
However, when I check the network tab, I noticed that the image is loaded in a text/plain format instead of an image format. How can I solve this issue?
Can anyone help me identify and resolve this problem?