loopback-storage-component画像ファイルの表示方法

Question

私はループバックコンポーネントストレージを使用してサーバーに画像をアップロードしています。 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}}に書き込みますとき、第1の方法は

{ "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" }

私を見るなり、第2の方法は、このようなそんなに悲しい兆しを、表示され、次のとおりです。

"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="">に投げようとしていましたが、それもうまくいきません。

質問：この写真を表示するには？ 誰かが私を助けることができますか？

Greetings、Alan。

Answer 1

画像を表示するにはbase64に変換する必要はありません。 ちょうどこのトリックを使用してください。

リンクは

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

ようになるダウンロードその後、あなた container Nameと Image Nameが

• Container Name = news-imgs

• File Name = 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" /> 

のような画像を今すぐごとに動的にダウンロードリンクを生成するために、角度を使用表示することができますしてダウンロードリンクを準備できることを意味します

画像。