Javascript 当html内容包含使用css加载的图像时，ng bind html不起作用_Javascript_Css_Angularjs_Ng Bind Html

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

javascript css angularjs

Javascript 当html内容包含使用css加载的图像时，ng bind html不起作用,javascript,css,angularjs,ng-bind-html,Javascript,Css,Angularjs,Ng Bind Html,我已经做了这里提到的所有事情。i、 e.我使用了“ngSanitize”并使用“sce.trustAsHtml（）”格式化html内容。此外，如果html包含文本和图像，它也会正确呈现，但当html内容包含使用“css”加载的图像时，它不会正确呈现图像。这是我想要绑定的HTML内容 <html> <head> <style> body{ padding: 0 0; margin: 0 0; } .img-wrapper{ width: 100%; heigh

我已经做了这里提到的所有事情。i、 e.我使用了“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>

和Html代码绑定，如下所示：

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

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

最后，我能够找到解决方案，如果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>

body{padding:0；margin:0；}.img包装器{
宽度：100%；高度：50%；边距：0自动；背景：url（'http://www.fnordware.com/superpng/pnggrad8rgb.png')
无重复中心；-webkit背景大小：包含；
-moz背景大小：包含；
-o-background-size:contain；background-size:contain；}`在此处输入代码测试图像上载是否成功地址在此处

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

body{padding:0；margin:0；}.img包装器{
宽度：100%；高度：50%；边距：0自动；背景：url（'http://www.fnordware.com/superpng/pnggrad8rgb.png')
无重复中心；-webkit背景大小：包含；
-moz背景大小：包含；
-o-background-size:contain；background-size:contain；}`在此处输入代码测试图像上载是否成功地址在此处