【问题标题】:loopback-storage-component how to display picture - fileloopback-storage-component 如何显示图片 - 文件
【发布时间】:2016-03-05 09:16:47
【问题描述】:

我正在使用 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="">,但它也不起作用。

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

你好,艾伦。

【问题讨论】:

  • 为什么不在base64中encore你的图像然后显示它?
  • 我真的不知道该怎么做。如果我将在 base64 中添加我的图像,那么我会得到什么?以及如何显示它?在 标签中,或者就像 {{smthing}} ??
  • 如果你用 base64 编码你的图像,它会返回一个字符串。然后你只需要写一些类似<img src="data:image/png;base64,{{base64string}}">的东西你就可以了解更多here
  • 我认为这会有所帮助,我现在会尝试走这条路。 ;)
  • 看上面的输出。我应该先将其转换为字符串,然后使用 angular-base64?

标签: javascript angularjs node.js loopbackjs strongloop


【解决方案1】:

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

假设您的 container NameImage 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 为每张图片动态生成下载链接。

【讨论】:

  • 是的,我已经想通了,并且是这样完成的。我只是想知道是否有另一种方法来获取此方法的完整请求 URL。它不满足我。
猜你喜欢
  • 2015-09-11
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-09-19
  • 1970-01-01
  • 2015-12-18
  • 2017-04-11
  • 1970-01-01
相关资源
最近更新 更多