Angular 4 add URL to innerhtml - json

Question

I'm using angular 4 innerHtml element for parsing Html from the server.
<div *ngFor="let html of htmlToRender">
<div [innerHtml]="html"></div>
</div>
I'm using API to get HTML from the server and the response I'm using JSON.parse() method to parse the response type.
it gives me the array
this.htmlToRender = JSON.parse(this.htmlToParse._body);
now the problem is when i'm rendering this.htmltoRender i may get some image or file URls which are having absolute path.
eg:
<img alt="" src="/Source/ImageBrowser/Image?path=logoCar.qd.png"
from the server, I will get such path... I need to add Url to access that source example: for the response, I need to append example "http://google.com"
ie.,.
<img alt="" src="http://google.com/Analytics/ImageBrowser/Image?path=logo.qd.png">
since parsing from the server they are not able to append
so any idea how we can achieve this in angular 4?

Answer 1

I think this happens due to angulars security mechanisms. Try using the DomSanitizer as described here.
Example:
updateVideoUrl(id: string) {
// Appending an ID to a YouTube URL is safe.
// Always make sure to construct SafeValue objects as
// close as possible to the input data so
// that it's easier to check if the value is safe.
this.dangerousVideoUrl = 'https://www.youtube.com/embed/' + id;
this.videoUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.dangerousVideoUrl);
}

Answer 2

You can try to replace all urls after you get the result from the server using a regular expression. Look for all occurrences of /Source/ImageBrowser/, and replace them with your desired url.
var regExp = new RegExp(/\/Source\/ImageBrowser\/*/g);
this.htmlToRender = this.htmlToRender.replace(regExp,'http://google.com/Analytics/ImageBrowser/');

Answer 3

Replace the occurance in Component itselef instead of in html for performance reasons,
Since you have array in this.htmlToRender,
this.htmlToRender.forEach(html => {
html = html.replace("/Source", "http://google.com/Analytics");
})
If you want to replace using regExp
this.htmlToRender.forEach(html => {
html = html.replace(/\/Source/i, "http://google.com/Analytics");
})
If /Source/ImageBrowser is not the same then you can do,
this.htmlToRender.forEach(html => {
let imageUrl = a.split('/');
imageUrl = imageUrl[imageUrl.length - 1]
imageUrl = "http://google.com/Analytics/ImageBrowser/" +imageUrl
html = imageUrl
})