I am working on Angular 4/ Angular CLI project.
Folder Structure on Tomcat server when deploy.
tomcat/
------Webapp/
-----------assets/bgr.svg
WebApp folder
main.bundle.js
// module
exports.push([module.i, ".myimg{\r\n background: url('/assets/bgr.svg') no-repeat center center fixed;\r\n background-size: cover;\r\n}", ""]);
Index.html
<head>
<meta charset="utf-8">
<title>Cliskeleton</title>
<base href="./">
base href is './' because i am using tomcat to deploy my application.
angular.cli
"assets": [
"assets",
"favicon.ico"
],
app.component.css
.myimg{
background: url('~/assets/bgr.svg') no-repeat center center fixed;
}
i can use relative path ('../assets/bgr.svg') here. But relative path bundles image and placed it in dist folder and i have hundred of images so it makes dist folder very big. So I don't want to use relative path.
I have tried 'assets/bgr.svg' also but i get an error as below.
ERROR in ./src/app/app.component.css
Module not found: Error: Can't resolve './assets/bgr.svg' in 'D:\Research\CLISkeleton\cliskeleton\src\app'
@ ./src/app/app.component.css 6:61-88
@ ./src/app/app.component.ts
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?http://localhost:4300 ./src/main.ts
Is there any way such that i can place all my images in 'assets' folder and reference it.
