27

Using the Angular template built into VS 2017. I have an image in the assets/image folder, so ClientApp > src > assets > images.

I reference the image in my component like:

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

When deployed local, it works but after deploying to IIS it results in 404 error.

On the server, the app is deployed to a subfolder: inetsrv8/internal/MyApp

I have to change the BASE HREF before deploying to get the app to work, so I'm thinking a fix would be to build custom paths for the images along the lines of BaseHref + './pathToImage'. The problem is I can't figure out how to grab the BASE Href to put it in a variable.

Is there a better way? A proper way? If not, how would I get the base href?

3
  • 4
    <img src="./assets/images/Logo.png" /> Commented May 17, 2018 at 21:37
  • Well heck, I thought I tried that. Works like a charm. I guess I was trying to be too fancy. Thanks. Add as answer.
    – BattlFrog
    Commented May 17, 2018 at 22:58
  • added ;) .... Please mark as answer or give upvote if it is helpful Commented May 17, 2018 at 23:03

4 Answers 4

35

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.

2
  • but you still need to have your app to be "developpable" so with this you just broke : ng serve
    – Mehdi
    Commented Aug 26, 2020 at 19:27
  • But this would not work, if I have not set base href for dev environment
    – Ram
    Commented Feb 9 at 9:14
10

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

$menu-icon-calendar: url('~/assets/menu/icon/calendar.png');
1
  • This gives me Error: Can't resolve '/assets/icon.svg' in '/.../src/styles'
    – Mick
    Commented Mar 19, 2023 at 14:55
6

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') />

3
  • what is strip, I could not find that method could you figure that method Commented Jan 31, 2023 at 6:41
  • 1
    Oops - I forgot those were just helpers I have which work the same like python, essentially for trimming characters. Here it is just normalizing to support both including and not-including the leading slash as well as trailing slashes
    – tplusk
    Commented Feb 1, 2023 at 16:09
  • Thank You for the snippet, I have used TypeScirpt methods for handling it. Commented Feb 2, 2023 at 4:07
0

Had a similar issue (Angular 17). This worked on ng serve, but not on the production side:

background-image: url('/assets/images/header.jpg');

Changed it to this and it worked on ng serve and the production:

background-image: url('../assets/images/header.jpg');

On production it is translated in the styles to:

./media/header-NH6VK55F.jpg

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.