当 html 内容包含使用 css 加载的图像时，ng-bind-html 不起作用答案

【问题标题】：ng-bind-html not working when html content contains image which loaded using css当 html 内容包含使用 css 加载的图像时，ng-bind-html 不起作用
【发布时间】：2015-12-11 11:58:31
【问题描述】：

我已经完成了这里提到的所有事情on post about same topic 。即我使用'ngSanitize'并使用'sce.trustAsHtml（）'格式化html内容，如果html有文本和图像，它会正确呈现，但是当html内容有使用'css'加载的图像时它不会正确呈现图像。这是我要绑定的 HTML 内容。

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

我的js代码如下：

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

将其绑定的 Html 代码如下：

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

【问题讨论】：

标签： javascript css angularjs ng-bind-html

【解决方案1】：

最后我能够找到解决方案，如果 html 内容包含使用 css 呈现的图像（即将背景设置为另一个 div），我们应该为用于绑定 html 的 div 指定大小。角度忽略''标签内的外部css设置的图像大小，我们也不应该将父'div'赋予我们用于设置背景图像的原始'div'。这是我的html代码：

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

这是我要绑定的更新后的 Html 内容：

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

【讨论】：