Ionic3 API HTML response render in HTML by default added "http://localhost:4200/" before every image resource URL

Ionic Framework ionic-v3
1

**1) HTML Response from API**

[{
"Default_HTML_Overlay":  "<div class="tab-pane active" style="width: 348px; height: 204px; margin: 0 auto; background-image: url('www.domain.com/BG/DC/White-Others-V1.jpg'); background-position: center center; background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; border: none; position: relative; overflow: hidden; -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);" id="front"> <div class="setLimit" style="width: 312px; height: 168px; margin: 18px; background-color: none; position: absolute; z-index: 51; overflow: visible;" id="safeZone"> <div id="customizePanelFront" style="position: absolute; width: 100%; height: 100%; display: block;"> <div id="imgPhoto" class="ppimage" style="position: absolute; top: 0px; left: 2px; width: 101px; height: 151px; z-index: 100;"> <img id="imagePhoto" src="www.domain.com/Photo/DC/photo_not_uploaded_grey.jpg" style="width: 100%; height: 100%;"/> </div><div id="imgLogo" style="position: absolute; top: 32px; left: 114px; width: 196px; height: 42px; text-align:right; z-index: 95;"> <img id="imageLogo" src="www.domain.com/Logo/General/DC/kw-full-color.png" style="max-width: 100%; max-height: 100%;"/></div><div id="imgDes1" style="position: absolute; top: 156px; left: 292px; width: 18px; height: 12px; z-index: 94;"> <img id="imageDes1" src="www.domain.com/Designation/General/DC/default-des1.png" style="width: 100%; height: 100%;"/></div><div id="imgDes2" style="position: absolute; top: 156px; left: 271px; width: 18px; height: 12px; z-index: 93;"> <img id="imageDes2" src="www.domain.com/Designation/General/DC/default-des2.png" style="width: 100%; height: 100%;"/></div><div id="imgDes3" style="position: absolute; top: 156px; left: 250px; width: 18px; height: 12px; z-index: 93;"> <img id="imageDes3" src="www.domain.com/Designation/General/DC/default-des3.png" style="width: 100%; height: 100%;"/> </div><div id="lblName" style="position: absolute; background-color: none; text-align: left; font-family: Helvetica_Neue_67_Md_Cn; font-size: 13pt; color: #000; text-transform: none; overflow: hidden; z-index: 90; width: 196px; height: 19px; line-height: 19px; top: -1px; left: 114px;"> <label id="lbltextName">Your Full Name</label> </div><div id="lblTitle" style="position: absolute; background-color: none; text-align: left; font-family: Helvetica_Neue_67_Md_Cn; font-size: 8pt; color: #000; text-transform: none; overflow: hidden; z-index: 89; width: 196px; height: 14px; line-height: 14px; top: 17px; left: 114px;"> <label id="lbltextTitle">Job Title</label> </div><div id="lblPhone" style="position: absolute; background-color: none; text-align: left; font-family: Helvetica_Neue_67_Md_Cn; font-size: 8pt; color: #000; text-transform: none; overflow: hidden; z-index: 87; width: 196px; height: 14px; line-height: 14px; top: 78px; left: 114px;"> <label id="lbltextPhone">First Phone / Other</label> </div><div id="lblOfficePhone" style="position: absolute; background-color: none; text-align: left; font-family: Helvetica_Neue_67_Md_Cn; font-size: 8pt; color: #000; text-transform: none; overflow: hidden; z-index: 86; width: 196px; height: 14px; line-height: 14px; top: 91px; left: 114px;"> <label id="lbltextOfficePhone">Second Phone / Other</label> </div><div id="lblMailID" style="position: absolute; background-color: none; text-align: left; font-family: Helvetica_Neue_67_Md_Cn; font-size: 8pt; color: #000; text-transform: none; overflow: hidden; z-index: 88; width: 196px; height: 14px; line-height: 14px; top: 105px; left: 114px;"> <label id="lbltextMailID">Email / Other</label> </div><div id="lblWebsite" style="position: absolute; background-color: none; text-align: left; font-family: Helvetica_Neue_67_Md_Cn; font-size: 8pt; color: #000; text-transform: none; overflow: hidden; z-index: 83; width: 196px; height: 14px; line-height: 14px; top: 118px; left: 114px;"> <label id="lbltextWebsite">Website / Other</label> </div><div id="lblAddress1" style="position: absolute; background-color: none; text-align: left; font-family: Helvetica_Neue_67_Md_Cn; font-size: 7pt; color: #000; text-transform: none; overflow: hidden; z-index: 82; width: 196px; height: 13px; line-height: 13px; top: 132px; left: 114px;"> <label id="lbltextAddress1">Street Address</label> </div><div id="lblAddress2" style="position: absolute; background-color: none; text-align: left; font-family: Helvetica_Neue_67_Md_Cn; font-size: 7pt; color: #000; text-transform: none; overflow: hidden; z-index: 81; width: 196px; height: 13px; line-height: 13px; top: 143px; left: 114px;"> <label id="lbltextAddress2">City State Zip</label> </div><div id="lblDisclaimer" style="position: absolute; background-color: none; text-align: left; font-family: Helvetica_Neue_67_Md_Cn; font-size: 5pt; color: #000; text-transform: none; overflow: hidden; z-index: 81; width: 220px; height: 11px; line-height: 11px; top: 158px; left: 2px;"> <label id="lbltextDisclaimer">Each Office is Independently Owned and Operated</label> </div></div></div><div class="one" id="cutFrontTop" style="background: url(www.domain.com/Common/DC/dot-line.jpg) repeat-x; width: 100%; height: 1px; position: absolute; top: 6px; left: 0px;"></div><div class="two" id="cutFrontBottom" style="background: url(www.domain.com/Common/DC/dot-line.jpg) repeat-x; width: 100%; height: 1px; position: absolute; top: 197px; left: 0px;"></div><div class="three" id="cutFrontLeft" style="background: url(www.domain.com/Common/DC/dot-line.jpg) repeat-y; width: 1px; height: 100%; position: absolute; top: 0px; left: 6px;"></div><div class="four" id="cutFrontRight" style="background: url(www.domain.com/Common/DC/dot-line.jpg) repeat-y; width: 1px; height: 100%; position: absolute; top: 0px; left: 341px;"></div></div>"
}]

**2) HTML Render**

<ion-item *ngFor="let card of result" (click)="cardTapped(card)">
    <ion-label [innerHTML]="getHtmlWithBypassedSecurity(card.Default_HTML_Overlay)">
    </ion-label>
  </ion-item>
</ion-content>

**3) DOM DomSanitizer**

public getHtmlWithBypassedSecurity(code: string): SafeHtml {
    return this.dom.bypassSecurityTrustHtml(code);
  }

: HTML error LIKE

GET http://localhost:4200/www.domain.com/Photo/DC/photo_not_uploaded_grey.jpg 404 (Not Found)

how to solve this issue anyone can help,

Thanks in advance.

2

Hi,
Did you find solutions for the same??

3

While you wait for better answers, I’d like to try to convince you not to use HTML as a transfer language. It makes apps hard to test and maintain, presents security risks that mean that things like innerHTML don’t do what you will probably want them to anyway, is easy to parse badly and very hard to parse well. If you need markup, use something more regular like Markdown.