how to place image src in dist on angular-cli prod build, when website is hosted in a subdomain?

Question

I have setup and angular-cli prod build. The image is placed in assets/images/somelogo.png.

I have a website on IIS : http://localhost:8000/ I have created a sub-website where I am trying to host the angular-cli build. the url of which is as follows :http://localhost:8000/a2

I creating the build as follows :

ng build --prod --deploy-url /a2

I have a header component which has an html as follows :

<a class="navbar-brand" href="/">
<img src="/assets/images/somelogo.png" alt="somelogo" />my image</a>

but on deployment the image url is shown as : /assets/images/somelogo.png but I want it to show : a2/assets/images/somelogo.png

I also tried changing the base-href by running the following :

ng build --prod --deploy-url /a2 --base-href /a2

but that doesn't work either. Can someone please help me with that ?

=========================================================================

I got it fixed by doing the following :

on the template I used :

<img [src]="imageSource"/>

on the template component I did the following:

import {PlatformLocation  } from '@angular/common';
export class MyComponent {
constructor(private platformLocation: PlatformLocation) { 
imageSource:string=this.platformLocation.pathname +'assets/images/somelogo.png';
}

platformLocation.pathname takes the base-href and appends it to the path. I am not sure if this is the right solution?

Answer 1

I tried ng build --prod --base-href . and this did the trick, thanks Will Huang for your response