Я пытаюсь загрузить 4 изображения png различных значков социальных сетей. И они расположены в том же каталоге, что и фон, который я использую, и я имею в виду их обоих одинаково с ../../images/[image], но изображения png не распознан правильно, и jpg, который загружается в CSS. Я совершенно не понимаю, почему это происходит
CSS:
.sidenav-container {
height: 100%;
background-image: url("../../images/background.jpg");
}
.app-content {
padding: 10px;
height: calc(100% - 84px);
}
mat-card {
border-radius: 1px;
padding: 20px;
}
.toolbar {
background-color: rgba(0, 0, 0, 0.5);
}
.themathon-text {
background-color: rgba(42,42,42,.7);
}
HTML:
<div [class.app-dark-theme]="true">
<mat-sidenav-container fullscreen class="sidenav-container">
<!-- The Navigation button at the top of the application -->
<mat-toolbar class="toolbar">
<div class="select-discord" (click)="navigateToDiscord()">
<mat-icon svgIcon="thumbs-up"></mat-icon> Discord
</div>
<div class="select-twitch" (click)="navigateToTwitch()">
<mat-icon svgIcon="thumbs-up"></mat-icon> Twitch
</div>
<div class="select-twitter" (click)="navigateToTwitter()">
<mat-icon svgIcon="thumbs-up"></mat-icon> Twitter
</div>
<div class="select-youtube" (click)="navigateToYoutube()">
<mat-icon svgIcon="thumbs-up"></mat-icon> YouTube
</div>
</mat-toolbar>
<!-- Main content of the website -->
<div class="app-content">
<img src="../../images/discord.png" alt="Discord">
<img src="../../images/twitch.png" alt="Twitch">
<img src="../../images/twitter.png" alt="Twitter">
<img src="../../images/youtube.png" alt="YouTube">
<mat-card class="themathon-text">
It's that time of the year again! <br>
The doors for the Themeathon Pre-Marathon submissions are now open!<br>
A marathon to help raise funds for equipment and other expenses to help
run the actual Themeathon event in Autumn this year.<br>
Make sure to submit your games over on this website!<br>
<button mat-raised-button color="primary">Submit</button>
</mat-card>
</div>
</mat-sidenav-container>
</div>
Структура файла:
css и html — это app.component.css и app.component.html.
Отладчик: