Angular 5 с материалом 2 - изображения Png не загружаются в правильный каталог?

Я пытаюсь загрузить 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.

введите здесь описание изображения

Отладчик:

введите здесь описание изображения введите здесь описание изображения


person Daniel Turcich    schedule 07.02.2018    source источник


Ответы (1)


Вам необходимо настроить angular-cli.json. Там вы можете указать путь к папке с ресурсами: По умолчанию папки src/assets/ и src/favicon.ico копируются. поэтому вам нужно добавить изображения.

"assets": [
  "assets",
  "images",
  "favicon.ico"
]

тогда вы также можете просто использовать /images/ для своих ссылок

person Sjoerd de Wit    schedule 07.02.2018