CODEWITHSUNDEEP
angularjsangularionic-frameworkionic2ionic-view
Bala Sivagnanam
Bala Sivagnanam

Reputation: 863

Displaying images in HTML as content inside ionic 2 app

This is an Ionic 2 app. The app fetches data using REST API and in JSON format. One of the field is sent as HTML content from the server. This is currently being displayed using 

 <div [innerHTML] = "'<p>' + eventMoreDetails.DescriptionHtml + '</p>'"></div>

This has image which is embeded in this html like

<p><img src="/Resources/Documents/bikers.jpg" title="" alt="" width="600" height="287" border="0"><br></p>"

Since this resolves to http://localhost:8100/Resources/Documents/bikers.jpg instead of actual url of the API, the is not getting loaded.

But I am not sure how to parse this content and replace it with API's url prefix.

Browser screenshot

Upvotes: 0

Views: 789

Answers (1)

trungvose
trungvose

Reputation: 20034

Just need to replace the image URL before binding as the following

var find = '/Resource/Documents/';
var re = new RegExp(find, 'g');

str = eventMoreDetails.DescriptionHtml.replace(re, 'http://YOUR_URL/Resource/Documents/');

On the server probably the image will always save at a specific folder. It will depend on your data to changed the path to replace.

Upvotes: 1

Related Questions