Angular 4: Setting img src base href inside of innerHTML

Question

In my Angular 4 app, I am using innerHTML to show description of the exercises which are in HTML format.

<li *ngFor="let exercise of exercises">
  <div [innerHTML]="exercise.longDescription"></div>
</li>

These descriptions can also contain images

<img src="/file/na\6ad7k4ynon6yh2qcibcdqxwcey.jpg">

and that is where I am struggling because I need to set the base href for these images to localhost:8080 where my backend is. Angular is trying to get them from standard localhost:4200 (ng serve) so I am getting errors.

Any idea how to do that?

Answer 1

Found a solution, not sure if is the cleanest one but it gets the job done.

I created a function in my exercise model that adds environment.URL to the src (which is localhost:8080 for development and server's API for production).

public getHTML () {
    return this.longDescription.replace(/<img src="([^"]+)">/, '<img src="'+environment.URL+'$1">');
  }

and I access it like this

<div [innerHTML]="exercise.getHTML()"></div>

instead.

Environment const looks like this:

export const environment = {
  production: false,
  URL: 'http://localhost:8080'
};