Is there a way to use angular base href as variable in image path?

Try this.

<img src="./assets/images/Logo.png" />

Actually it depends on build structure. Best way is to check angular-cli configuration. Otherwise ng built and check where is your assert files.

Had trouble in SCSS to reference image too. Using ~ did the trick :

$menu-icon-calendar: url('~/assets/menu/icon/calendar.png');

You can add the APP_BASE_HREF injection token in the providers:

  providers: [
    {
      provide: APP_BASE_HREF,
      useFactory: (s: PlatformLocation) => s.getBaseHrefFromDOM(),
      deps: [PlatformLocation]
    }
  ],

then inject it in a service (or component)

export class UrlService {

  constructor(
    @Inject(APP_BASE_HREF) private _baseHref: string
  ) { }

  baseHref(): string {
    return `/${strip(this._baseHref, '/')}`;
  }

  rootRelative(s: string): string {
    return `${rstrip(this.baseHref(), '/')}/${lstrip(s, '/')}`;
  }
}

Then in your template, you can use that function (if you've injected UrlService)

<img [src]="urlService.rootRelative('/assets/images/blah.png') />