5

I am using loopback-component-storage for uploading images to server. https://docs.strongloop.com/display/public/LB/Storage+component

I have also AngularJS JavaScript SDK so my lb-services.js is dynamically updated. https://docs.strongloop.com/display/public/LB/AngularJS+JavaScript+SDK

Now I want to display in my webpage the photo from this loopback component storage model, called container, so I can use in my angular controller method getFile (from the lb-service), which "Get information for specified file within specified container." like that:

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

or I can use method download, which "Download a file within specified container." like that:

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

in my controller.

Now, the problem is, when I will write in the .html file {{smthing}}, the first method will show me

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

and the second method will show so much sad signs, like this:

"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

I think it's the Image object but in the json, right?

I was also trying to throw the {{smthing}} to <img src=""> tag, and <img ng-src="">, but it doesn't work too.

The question is: how to display this photo? Can somebody help me, please?

Greetings, Alan.

Alan
  • 108
  • 7
  • 1
    Why don't you encore your image in base64 then display it ? – naurel Dec 01 '15 at 12:41
  • I don't really know how to do it. If I'll encore my image in base64, then what will I get? And how to display it? In tag, or just like {{smthing}} ?? – Alan Dec 01 '15 at 12:53
  • 2
    If you encode your image in base64 it'll return you a string. Then you just have to write something like `` you can learn more [here](http://www.websiteoptimization.com/speed/tweak/inline-images/). – naurel Dec 01 '15 at 13:05
  • I think it'll be helpful, I'll try to go this way now. ;) – Alan Dec 01 '15 at 13:13
  • Look above at the output. Should I first convert this into string, and then use angular-base64? – Alan Dec 01 '15 at 13:30
  • The above content isn't exploitable for b64 encode. You need your original file to do it. Check [this](http://stackoverflow.com/a/20285053/4277543) and [this](http://stackoverflow.com/questions/8110294/nodejs-base64-image-encoding-decoding-not-quite-working). In fact you'll read your image bytes and convert them into a base64 string. Then you just have to display it inline. – naurel Dec 01 '15 at 13:39
  • Since you're using angularjs you can try [this](https://github.com/ninjatronic/angular-base64) too. – naurel Dec 01 '15 at 13:46
  • Yup, i've installed the angular-base64, but before using it I'll first need to convert this content so it's eploitabl for b64 encode as you says. I need the original file to do it, but the method download() which I described above returns me what it returns..JSON object of the image ;x – Alan Dec 01 '15 at 13:53
  • I've no idea of how loopback-component-storage works – naurel Dec 01 '15 at 14:04
  • I think there is easier way than converting json to string, encoding it, etc. There must be a reason why this method returns me a json. :D – Alan Dec 01 '15 at 14:11
  • Remember that you're using a storage API. It wasn't made to diplay purpose. Your first method : _"Get information for specified file within specified container"_ agreed to the doc. Then the download method is downloading the file inside the container. I suppose the container is a structure. You need to find how to extract a file from it. – naurel Dec 01 '15 at 14:51

1 Answers1

2

There is no need to convert to base64 to show the image. Just Use this trick.

Suppose your container Name and Image Name is

  • Container Name = news-imgs

  • File Name = smallpic.png

    Then download link would be like

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

    Which means you can prepare your download link by

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

And In your view you can show image like

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

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

Now use Angular to generate download link dynamically for each images.

Robins Gupta
  • 3,143
  • 3
  • 34
  • 57
  • Yup, I've already figured it out, and acomplished like this. I was just wondering if there is another way, to get full request URL of this method.. It doesn't satisfy me. – Alan Dec 01 '15 at 19:12