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>
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>