ng-bind-html not working when html content contains image which loaded using css

Question

I have done all the things mentioned here on post about same topic . i.e. I used 'ngSanitize' and format html content using 'sce.trustAsHtml()' also, it render correctly if html have text and images, but it does not render images correctly while html content have image which loaded using 'css'. Here is my HTML content which i want to bind.

<html> <head> <style> body{ padding: 0 0; margin: 0 0; } .img-wrapper{ 
width: 100%; height: 50%; margin: 0 auto; background: url('http://www.fnordware.com/superpng/pnggrad8rgb.png')
 no-repeat center; -webkit-background-size: contain; -moz-background-size: contain; 
-o-background-size: contain; background-size: contain; } </style> </head> <body> <div>
<div class='img-wrapper'></div><div style='font-size: 20px;' >Test the image upload or not 
successfully</div> <div align=center style='font-size: 17px;'>Address goes here</div>
</div> </body></html>

My js code as bellow:

$scope.content = $sce.trustAsHtml(adTemp.content);

And Html code to bind it as bellow:

<div ng-bind-html="content"> </div>

Pramod Gaikwad · Accepted Answer · 2015-12-11 14:09:00Z

Finally I am able to find the solution, we should give size to div which we are using to bind html if html content contains images which are rendered using css (i.e. set background to another div). The angular ignores image size set by external css inside '' tags, also we should not give parent 'div' to our original 'div' which used to set background image. Here is my html code:

<div style="width:500px; height:600px;"   ng-bind-html="myHtml"></div>

And here is my updated Html content which i want to bind:

<html> <head> <style> body{ padding: 0 0; margin: 0 0; } .img-wrapper{ 
width: 100%; height: 50%; margin: 0 auto; background: url('http://www.fnordware.com/superpng/pnggrad8rgb.png')


no-repeat center; -webkit-background-size: contain; 
-moz-background-size: contain; 
-o-background-size: contain; background-size: contain; } </style> </head> <body>`enter code here<div class='img-wrapper'></div><div style='font-size: 20px;' >Test the image upload or not successfully</div> <div align=center style='font-size: 17px;'>Address goes here</div> </body></html>

Collectives™ on Stack Overflow

ng-bind-html not working when html content contains image which loaded using css

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related