Jhipster gateway project make ng-bind-html work

Question

I am doing a micro service gateway. One of my entity has a field(its name is productImgHyperLink) which is a String field and has full html element like below will be stored as its content.

<img src="http://image.xyz.com/images/I/431156.789.jpg" border="0" alt="Product Image">

In the generated .html, it can be show the content

<td>{{productInfo.productImgHyperLink}}</td>

However, I want to show it as an image, other than a text string.

I have tried

1. add 'ngSanitize', to the webapp\\app.module.js

2. add a trustAshtml.js under weapp\\app\\compoments]util\\ the trustAshtml.js contnet is like below.

    /** * */ (function() { 'use strict'; angular .module('kdiStoreApp') .filter('trustAsHtml', trustAsHtml); function trustAsHtml($sce) { return function(html) { return $sce.trustAsHtml(html); } } })(); 

3. Then changed the html of the field in the detail page to below.

    <td ng-bind-html={{productInfo.productImgHyperLink | trustAsHtml}}></td> 

However, it can not show the image on the output.

4. the output on final html is something like below:

    <td ng-bind-html="<img src="http://image.xyz.com/images/I/431156.789.jpg" border="0" alt="Product Image">"></td> 

5. the output, it is the same as using below without " | trustAsHtml"

    <td ng-bind-html={{productInfo.productImgHyperLink}}></td> 

Please anyone have any suggestion on how to make the image showing up? Thanks.

Answer 1

If you want the image to be displayed you should use <img ng-src={{your-link-property}}></img> . Sorry didn't see you are saving a complete html tag.