[英]Jhipster gateway project make ng-bind-html work
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. 我的实体之一具有一个字段(其名称为productImgHyperLink),该字段是String字段,并且具有如下所示的完整html元素,将作为其内容存储。
<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 在生成的.html中,可以显示内容
<td>{{productInfo.productImgHyperLink}}</td>
However, I want to show it as an image, other than a text string. 但是,我想将其显示为图像,而不是文本字符串。
I have tried 我努力了
add a trustAshtml.js under weapp\\app\\compoments]util\\ the trustAshtml.js contnet is like below. 在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); } } })();
Then changed the html of the field in the detail page to below. 然后将详细信息页面中字段的html更改为以下内容。
<td ng-bind-html={{productInfo.productImgHyperLink | trustAsHtml}}></td>
However, it can not show the image on the output. 但是,它无法在输出上显示图像。
the output on final html is something like below: 最终html的输出如下所示:
<td ng-bind-html="<img src="http://image.xyz.com/images/I/431156.789.jpg" border="0" alt="Product Image">"></td>
the output, it is the same as using below without " | trustAsHtml" 输出,与不使用“ | trustAsHtml”的情况相同
<td ng-bind-html={{productInfo.productImgHyperLink}}></td>
Please anyone have any suggestion on how to make the image showing up? 请任何人对如何显示图像有任何建议? Thanks. 谢谢。
If you want the image to be displayed you should use <img ng-src={{your-link-property}}></img>
. 如果要显示图像,则应使用<img ng-src={{your-link-property}}></img>
。 Sorry didn't see you are saving a complete html tag. 抱歉,您没有保存完整的html标签。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.