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

【问题标题】：Background image not found after deploying angular 4 app into tomcat将 Angular 4 应用程序部署到 tomcat 后找不到背景图像
【发布时间】：2018-02-20 15:43:54
【问题描述】：

我正在开发 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 文件夹中。

有什么方法可以在我的 Dev 和 Prod 环境中使用背景图像？

【问题讨论】：

标签： angular tomcat webpack angular-cli

【解决方案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

【讨论】：

【解决方案2】：

试试这个我不确定

删除资产前的反斜杠

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

【讨论】：