loopback-storage-component如何显示图片文件

Question

我正在使用loopback-component-storage将图像上传到服务器. https://docs.strongloop.com/display/public/LB/Storage+component

我还有AngularJS JavaScript SDK,所以我的lb-services.js是动态更新的. https://docs.strongloop.com/display/public/LB/AngularJS+JavaScript+SDK

现在我想在我的网页中显示来自此环回组件存储模型的照片,称为容器,因此我可以在我的角度控制器方法getFile(来自lb-service)中使用,其中"获取指定容器内指定文件的信息".像那样:

$scope smthing = Container.getFile({container: 'news-imgs', file: 'smallpic.pnh'})

或者我可以使用方法下载,即"在指定容器中下载文件".像那样:

$scope smthing = Container.download({container: 'news-imgs', file: 'smallpic.png'})

在我的控制器中.

现在,问题是,当我在.html文件中写入时{{smthing}},第一种方法将显示给我

{ "container": "news-imgs", "name": "smallpic.png", "size": 757, "atime": "2015-12-01T11:49:36.840Z", "mtime": "2015-12-01T11:49:36.840Z", "ctime": "2015-12-01T11:49:36.840Z" }

而第二种方法将显示如此多的悲伤迹象,如下所示:

"0":"?","1":"P","2":"N","3":"G","4":"\r","5":"\n","6":"\u001a","7":"\n","8":"\u0000","9":"\u0000","10":"\u0000","11":"\r","12":"I","13":"H","14":"D","15":"R","16":"\u0000","17":"\u0000","18":"\u0000","19":"\u0014","20":"\u0000","21":"\u0000","22":"\u0000","23":"\u0012","24":"\b","25":"\u0003","26":"\u0000","27":"\u0000","28":"\u0000","29":"l","30":"\u000e","31":"\u000e","32":"\"","33":"\u0000","34":"\u0000","35":"\u0000","36":"\u0019","37":"t","38":"E","39":"X","40":"t","41":"S","42":"o","43":"f","44":"t","45":"w","46":"a","47":"r","48":"e","49":"\u0000","50":"A","51":"d","52":"o","53":"b","54":"e","55":" ","56":"I","57":"m","58":"a","59":"g","60":"e","61":"R","62":"e","63":"a","64":"d","65":"y","66":"q","67":"?","68":"e","69":"<","70":"\u0000","71":"\u0000","72":"\u0001","73":"?","74":"P","75":"L","76":"T","77":"E","78":"?","79":"?","80":"?","81":"?","82":"?","83":"?","84":"?","85":"\u0000","86":"r","87":"?","88":"?","89":"?","90":"?","91":"\u0000","92":"?","93":"?","94":"\u0000","95":"~","96":"?","97":"?","98":"?","99":"?","100":"\u0000","101":"x","102":"?","103":"\u0012","104":"?","105":"?","106":"\u0000","107":"","108":"?","109":"\t","110":"?","111":"?","112":"\u0016","113":"{","114":"?","115":"\u0002","116":"?","117":"?","118":"(",...etc

我认为这是Image对象,但在json中,对吗？

我也试图抛出{{smthing}}来<img src="">标记,<img ng-src="">但它并没有工作过.

问题是:如何显示这张照片？请问有人可以帮助我吗？

问候,艾伦.

Answer 1

无需转换即可base64显示图像。就用这个技巧吧。

假设你的container Name和 Image Name是

• Container Name = news-imgs

• File Name = smallpic.png

  然后下载链接就像

  /api/containers/news-imgs/download/smallpic.png

  这意味着您可以通过以下方式准备下载链接

  /api/container/Your-Container-Name/download/Your-File-Name

在你看来，你可以显示类似的图像

<img ng-src="/api/container/Your-Container-Name/download/Your-File-Name" />

<img ng-src="/api/containers/news-imgs/download/smallpic.png" />

现在使用 Angular 为每个图像动态生成下载链接。