How to reference images in lazy loaded modules in Angular 2\4?

Question

I have some images that I need to share across the application. I have 2 lazy loaded modules. Login and Overview. I have stored the image in src/assets/images/logo.png and want to use this image in both Login and Overview.

My current project structure is : (prefixed numbers are levels, just for reference)

-0_ProjectName
 -1_src
   -2_assets
     -3_images
       -4_logo.png
   -2_modules
     -3_login
       -4_containers
         -5_login.component.scss
         -5_login.component.ts
         -5_login.component.html
     -3_overview
       -4_containers
         -5_overview.component.scss
         -5_overview.component.ts
         -5_overview.component.html

How can I reference src/assets/images/logo.png inside Login and Overview in respective scss files of the modules? I if try to give the image path in scss(login.component.scss and overview.component.scss) as "../../../assets/images/logo.png" (3 directories up), it keeps throwing a message saying image is not found.

Error log: ./src/modules/login/containers/login.component.scss Module not found: Error: Can't resolve '../../../assets/images/logo.png' in 'C:\Users\deepak\A2Workspace\ProjectName\src\modules\login\containers'

Tiep Phan · Accepted Answer · 2017-05-19T07:27:55.317

0

assume you're using Angular CLI, the assets folder will be copy to another location, you could reference to absolute path with root:

background: url(/assets/images/logo.png)

edited May 19 '17 at 07:27

answered May 19 '17 at 07:02

Tiep Phan

12,386
3
38
41

Yes, I am using Angular CLI. I did try that. Unfortunately, not sure why, this approach works well for svg files (I can directly give somthing like this in html: `` within module's scss. However, png and jpegs are not working with this approach. – Deepak May 19 '17 at 07:07
Is there any configuration change that I need to make in angular cli json file to make this work? – Deepak May 19 '17 at 07:10
no, you don't need config anything in .angular_cli.json – Tiep Phan May 19 '17 at 07:12
if you're set base-href to `/`, use 2nd option above, I can verify it's working. – Tiep Phan May 19 '17 at 07:21
Yes, I do have base-href. – Deepak May 19 '17 at 09:39
I actually was using 'background-image' and i replaced it with 'background' and it worked. If I try to use 'background-image' it doesn't work. Why is that? – Deepak May 19 '17 at 09:44
I'm not sure, but in feature Angular CLI will support well relative url for css :) – Tiep Phan May 19 '17 at 10:52
Hi Teip, On a side note, while bundling prod version(ng build --prod), images and fonts stored in assets are pointing to root of the server, instead of pointing to the virtual directory. For example, I have project located in myserver.com/myproject/index.html whereas, this app looks for images in myserver.com/assets/bg.jpg, instead of myserver.com/myproject/assets/bg.jpg . Same problem with custom fonts too. Any idea if you have come across this issue? If yes, how did you manage to resolve it? – Deepak May 23 '17 at 13:02

score 0 · Answer 2 · edited May 23 '17 at 11:33

Have u written this in your index.html file after the head tag.

   <base href="/">

The informs the Angular router about the static part of the URL. The router then only modifies the remaining part of the URL.

Then in scss file you can use like

     background-image: url(../../../assets/images/logo.png)

Also I am using Webpack, so in webpack I resolve the path by mentioning it in the webpack config. This answer might help you understand, https://stackoverflow.com/a/38748466/2312318

How to reference images in lazy loaded modules in Angular 2\4?

2 Answers2