Relative references break when loading external HTML to Angular 2 component

Question

I have a server that hosts simple HTML like the following:

<a href="http://www.google.com" target="_blank">
   <img src="img/main.PNG"/>
</a>

The src attribute of the IMG tag contains the relative location of the file I want to show. This works perfectly when opening with a browser.

The problem is that when I load it with angular, Angular tries to resolve that relative location locally, which obviously won't work. I followed the tips given here in SO. For example this issue.

What I have now:

HTML:

<div [innerHTML]="content"></div>

TypeScript:

this.myService.subscribe(
  (html: any) => {
     this.content = html._body;
     this.loaded = true;
  },
  err => {
    this.error = true;
  });

If I change the HTML on the server to return the absolute URL of the image then it works:

 <img src="http://localhost:5500/img/main.PNG"/>

This, however, is not a feasible solution in my case.

So my question is: Is there a way to load HTML content from an external source with Angular 2 in a way that won't broke relative references in said HTML?

Have you tried "./img/main.PNG"? – Chris Sharp Oct 07 '17 at 14:41 — Chris Sharp, Oct 07 '17 at 14:41
That... is embarrassing. It works, thank you! :) – barney.balazs Oct 07 '17 at 15:32 — barney.balazs, Oct 07 '17 at 15:32

score 1 · Accepted Answer · answered Oct 07 '17 at 15:33

1

Try changing "img/main.PNG" to "./img/main.PNG"

answered Oct 07 '17 at 15:33

Chris Sharp

2,005
1
18
32

Relative references break when loading external HTML to Angular 2 component

1 Answers1