CODEWITHSUNDEEP
htmlangulartypescript
barney.balazs
barney.balazs

Reputation: 640

Relative references break when loading external HTML to Angular 2 component

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?

Upvotes: 0

Views: 106

Answers (1)

Chris Sharp
Chris Sharp

Reputation: 1995

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

Upvotes: 1

Related Questions