javascripthtmlangularjsng-bind-htmlngsanitize

Can't bind <img> tag in HTML content. Angular.js


Hello I am trying to bind an HTML string into my div it contains tags too. Bold strings normal strings showing without any problem but my tags coming as string.

I am using ng-bind-html with ngSanitize

<div flex style="width:100%;height:100%;background-color:white" ng-bind-html="news_detail">

</div>

My HTML content is

<p>NBA'de sezon, Golden State Warriors'ın Cleveland Cavaliers'ı 4-0'la geçip şampiyon olmasıyla birlikte tamamlandı. Biz de her NBA takımının, geride bıraktığımız sezonda ne yaptığına dair ufak değerlendirmeler kaleme almaya karar verdik. Bugün, Atlantik Grubu'nu ele alacağız.</p><p>&lt;img src='http://i68.tinypic.com/2zoxmx3.jpg'/&gt;</p><p><strong>Toronto Raptors</strong></p>

It is showing like this exactly

NBA'de sezon, Golden State Warriors'ın Cleveland Cavaliers'ı 4-0'la geçip şampiyon olmasıyla birlikte tamamlandı. Biz de her NBA takımının, geride bıraktığımız sezonda ne yaptığına dair ufak değerlendirmeler kaleme almaya karar verdik. Bugün, Atlantik Grubu'nu ele alacağız.

<img src='http://i68.tinypic.com/2zoxmx3.jpg'/>

Toronto Raptors

How can I show img tags ?


Solution

  • Your HTML string being pulled from your database has the img tags escaped so they are not being treated as HTML. You need to change the string to be properly written HTML, for example:

    Old string:

    <p>NBA'de sezon ...</p><p>&lt;img src='http://i68.tinypic.com/2zoxmx3.jpg'/&gt;</p><p><strong>Toronto Raptors</strong></p>
    

    New string:

    <p>NBA'de sezon, ...</p><p><img src='http://i68.tinypic.com/2zoxmx3.jpg'/></p><p><strong>Toronto Raptors</strong></p>