angular - 将 Angular 4 应用程序部署到 tomcat 后找不到背景图像

Question

我正在开发 Angular 应用程序，我已经使用 angular-cli 生成了项目结构。我在我的组件中使用下面的 css:

.profilePic{
    height:67px;
    width: 67px;
    display: block;
    background: url('/assets/images/header-profile-pic.png') no-repeat center center
}

当我做 ng serve出于开发目的；应用程序在 localhost:4200 上运行良好，并且可以加载上面的图像。

当我做 ng build --prod , 它生成 dist文件夹，然后我将这个 dist 文件夹复制到我的部署服务器(在我的例子中是 tomcat)，当尝试打开应用程序时，背景图像不会加载。

在控制台上它显示 404 错误。

我在我的 HTML 中设置了基本标签 <base href="./"> .在 dist 文件夹中， Assets 文件夹位于根级别。如果我尝试将 css 更新为类似 background: url('./assets/images/header-profile-pic.png') no-repeat center center 的路径; ng-build 给我一个错误，

Module not found: Error: Can't resolve './assets/images/header-profile-pic.png' in 'D:\Node\Angular 2\Router\src\app\login-component'

我试过了this answer's第二个要点，它确实有效。但我只想将所有图像放在 Assets 文件夹中。

有没有什么方法可以让我的开发环境和生产环境都使用背景图片？

Answer 1

更新:

由于 <image> 标签接受源路径，请尝试以下解决方法:

在HTML中在线设置样式:

...[ngStyle]="{'background-image': 'url(/assets/images/header-profile-pic.png)'}" ..

并留在 CSS 中:

background: no-repeat center center;

---

旧答案:

您不必为开发和生产更改样式表。将其更正为以下内容:

background: url(/assets/images/header-profile-pic.png) no-repeat center center