Jhipster網關項目使ng-bind-html工作

Question

我正在做一個微服務網關。 我的實體之一具有一個字段（其名稱為productImgHyperLink），該字段是String字段，並且具有如下所示的完整html元素，將作為其內容存儲。

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

在生成的.html中，可以顯示內容

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

但是，我想將其顯示為圖像，而不是文本字符串。

我努力了

1. 將'ngSanitize'添加到webapp \\ app.module.js

2. 在weapp \\ app \\ compoments] util \\下添加一個trustAshtml.js，如下所示。

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

3. 然后將詳細信息頁面中字段的html更改為以下內容。

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

但是，它無法在輸出上顯示圖像。

4. 最終html的輸出如下所示：

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

5. 輸出，與不使用“ | trustAsHtml”的情況相同

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

請任何人對如何顯示圖像有任何建議？ 謝謝。

Answer 1

如果要顯示圖像，則應使用<img ng-src={{your-link-property}}></img> 。 抱歉，您沒有保存完整的html標簽。