我已经完成了这里提到的所有事情 on post about same topic 。即我使用了“ngSanitize”并使用“sce.trustAsHtml()”格式化html内容，如果html具有文本和图像，它会正确渲染，但当html内容具有使用“css”加载的图像时，它不会正确渲染图像。这是我想要绑定(bind)的 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);
绑定(bind)它的 Html 代码如下:
<div ng-bind-html="content"> </div>
最佳答案
最后我找到了解决方案，如果 html 内容包含使用 css 渲染的图像(即将背景设置为另一个 div)，我们应该为用于绑定(bind) html 的 div 指定大小。 Angular 忽略“”标签内外部CSS设置的图像大小，我们也不应该将父级“div”赋予用于设置背景图像的原始“div”。 这是我的 html 代码:
<div style="width:500px; height:600px;" ng-bind-html="myHtml"></div>
这是我想要绑定(bind)的更新的 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>
关于javascript - 当 html 内容包含使用 css 加载的图像时，ng-bind-html 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34223040/