将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文件夹中，资产文件夹位于根级别。如果我尝试将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'

我尝试过这个答案的第二个要点，它确实有效。但是我想将所有图像都放在资产文件夹中。

是否有任何方法可以使背景图片在我的开发和生产环境中都可用？

- user1608841

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

- Vega

Answer 2

尝试一下，我不确定。

删除 assets 前面的反斜杠。

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

- Sheik Althaf