将angular 4 app部署到tomcat后找不到背景图像

Question

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

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

当我为了开发目的而ng serve时; app在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环境中提供背景图像？

Answer 1

<强>更新：

As＆lt; image＆gt; tag接受源路径，尝试以下解决方法：

在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

Answer 2

试试这个我不确定

删除资产

之前的反斜杠

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