ng-bind-html не работает, когда содержимое html содержит изображение, загруженное с помощью css

Я сделал все, что упоминалось здесь on post about same topic. т. е. я использовал 'ngSanitize' и форматировал html-контент, используя также 'sce.trustAsHtml()', он корректно отображает, если html имеет текст и изображения, но он не отображает изображения правильно, а содержимое html имеет изображение, загруженное с помощью 'css'. Вот мой HTML-контент, который я хочу связать.ng-bind-html не работает, когда содержимое html содержит изображение, загруженное с помощью css

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

источник

2015-12-11 Pramod Gaikwad

Наконец я смог найти решение, мы должны дать размер в div, который мы используем для привязки html, если html-контент содержит изображения, которые отображаются с помощью css (т. е. задают фон другому 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>

источник

2015-12-11 14:09:00

ng-bind-html не работает, когда содержимое html содержит изображение, загруженное с помощью css

ответ

Смежные вопросы