我正在开发一个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'
我尝试过这个答案的第二个要点,它确实有效。但是我想将所有图像都放在资产文件夹中。
是否有任何方法可以使背景图片在我的开发和生产环境中都可用?