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

Question

我已经完成了此处提到的所有事情 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>

Answer 1

我终于找到了解决方案，如果 html 内容包含使用 css（即将背景设置为另一个 div）。 angular 忽略 '' 标签内由外部 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>

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

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

javascript

css

angularjs

ng-bind-html