无法在我的均值堆栈应用程序中加载本地图像

Question

So I have an image I have stored in my app. Now I have my home component and the initial idea was to use the image as the background of my Jumbotron. I created an images folder inside my assets folder ( see project structure below ) and used the below code in my Scss file to load the image as a background:

 @import "../SCSS-partials/variables";

.jumbotron {
  color: $theme-color-white;
  font-style: 'Shift', sans-serif;
  background-image: url("../images/home-jumbotron.jpg");
}

I used a relative path to the image file, but the image is not showing. Does anyone know why and how to fix this?

Home.component.html

<div class="home-page">
    <div class="jumbotron jumbotron-fluid">
        <div class="container-fluid">
            <h1>Harry Potter: Wizards Unite Fanpage</h1>
            <h3>Latest News and Tip & Tricks</h3>
        </div>
    </div>
    <img src="../images/home-jumbotron.jpg" alt="fail">
</div>

Project Structure:

Answer 1

您必须将该路径添加到angular-cli.json的资产中，或仅将该图像放入资产文件夹中。