ng-bind-html does not load image src

Answer 1

1. There isn't much more to add to what you said.

   ng-bind-html allows you to load HTML content into your angular app after it has been sanitized (using the $sanitise service). On the other hand, ng-bind-html-unsafe allows you to load any HTML content without being sanitized.

   The sanitise process consists on checking each element of the provided HTML content with a list of well known HTML tags/elements. Any tag/element that isn't on the list is then removed. Apart from that there are a few more validations on specific HTML attributes (such as the src).

   In your case the element <img src="icons/youtube.png" alt="Youtube"/> doesn't have a valid src attribute because it doesn't match AngularJS' URI regexp: /^((ftp|https?):\/\/|mailto:|tel:|#)/

   For more information check ngBindHtml, ngBindHtmlUnsafe and $sanitize (and AngularJS source code)

2. I believe there isn't... especially if you don't control the HTML you are loading in. As stated on the ngBindHtmlUnsafe documentation:

   You should use this directive only if ngBindHtml directive is too restrictive and when you absolutely trust the source of the content you are binding to.

   So, it's all about trusting the source of the HTML content you're loading. In last case you can always process/'sanitise' the HTML content yourself, however that doesn't seem to be easy to accomplish, specially if the content is dynamic.

Answer 2

Nenad answered a question like this recently. By invoking $sce.trustAsHtml($scope.html) you will be able to mark the HTML as valid so that ng-bind-html will accept it. Even when the img src is relative and would therefore otherwise be marked as invalid.

You can find his post here