src stripped from json html data when using angular.js and angular-sanitize.js

Question

I'm an angular noob here... but enjoying figuring it out. I have simple json file containing text like so:

   "gettingstarted":{
      "title":"Getting Started",
      "content":"<img ng-src='images/pageone-snorkeler.png' width='150' height='107' alt='Snorkeler' /><p>Getting Started...... and a lot of other html in here...</p>"
   },"etc..."

I am trying to load images into the rendered html, however, angular seems to be stripping the src and ng-src from my html.

My page.tpl.html file looks like so:

<h1 ng-bind-html="page.title"></h1>
<div ng-bind-html="page.content"></div>

I am loading / using:

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-sanitize.min.js"></script>

I can see all the html render in the page correctly from the json data, however, not the image. It is rendering like so:

<img width='150' height='107' alt='Snorkeler' />

What am I missing to get images to load in my html?

EDIT:::: Looks like I needed to word my question different... I found the answer here: ng-bind-html does not load image src

ng-bind-html-unsafe

...which isn't working for me... or use the fully resolved url: http://superraddomainname.com/image/image.png for example.

Answer 1

ng-bind-html-unsafe has been removed in angular 1.2. What you've done with ng-bind-html should work, you have to make sure you add ngSanitize as a dependency in your app. For example...

angular.module('myApp', ['ngSanitize']);

Demo - Fiddle