Angular 5 with Material 2 - Png 图像没有加载正确的目录？答案

【问题标题】：Angular 5 with Material 2 - Png images not loading with proper directory?Angular 5 with Material 2 - Png 图像没有加载正确的目录？
【发布时间】：2018-07-18 05:35:43
【问题描述】：

我正在尝试加载各种社交媒体图标的 4 个 png 图像。而且它们与我使用的背景位于同一目录中，并且我以与 ../../images/[image] 相同的方式引用它们，但 png 图像不是正确识别并且在 CSS 中加载的 jpg 是。我对为什么会发生这种情况的线索完全为零

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

调试器：

【问题讨论】：

标签： html css angular angular-material2

【解决方案1】：

您需要配置您的angular-cli.json 在那里您可以为您的资产文件夹指定路径：默认情况下，src/assets/ 文件夹和 src/favicon.ico 会被复制过来。所以你需要添加图片。

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

那么您也可以只使用/images/ 作为您的链接

【讨论】：