2015-12-01 10 views
5

मैं सर्वर पर छवियों को अपलोड करने के लिए लूपबैक-घटक-स्टोरेज का उपयोग कर रहा हूं। https://docs.strongloop.com/display/public/LB/Storage+componentलूपबैक-स्टोरेज-घटक चित्र कैसे प्रदर्शित करें - फ़ाइल

मेरे पास AngularJS जावास्क्रिप्ट एसडीके भी है इसलिए मेरी lb-services.js गतिशील रूप से अपडेट की गई है। https://docs.strongloop.com/display/public/LB/AngularJS+JavaScript+SDK

अब मैं अपने वेबपेज में इस लूपबैक घटक भंडारण मॉडल कहा जाता है, कंटेनर से तस्वीर प्रदर्शित करना चाहते हैं, तो मैं, जो "निर्दिष्ट के लिए जानकारी प्राप्त करें (पौंड-सेवा से) मेरी कोणीय नियंत्रक विधि getFile में उपयोग कर सकते हैं निर्दिष्ट कंटेनर के भीतर फ़ाइल। " इस तरह: "। निर्दिष्ट कंटेनर के भीतर एक फ़ाइल डाउनलोड"

$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

मुझे लगता है कि यह छवि वस्तु लेकिन json में, ठीक है?

मैं {{smthing}}<img src=""> टैग, और <img ng-src=""> पर फेंकने की भी कोशिश कर रहा था, लेकिन यह भी काम नहीं करता है।

सवाल यह है कि: इस तस्वीर को कैसे प्रदर्शित करें? क्या कोई मेरी मदद कर सकता है, कृपया?

ग्रीटिंग्स, एलन।

+1

आप अपनी छवि को बेस 64 में क्यों नहीं लगाते हैं और फिर इसे प्रदर्शित करते हैं? – naurel

+0

मुझे वास्तव में यह नहीं पता कि यह कैसे करें। अगर मैं अपनी छवि को बेस 64 में दोहराना चाहूंगा, तो मुझे क्या मिलेगा? और इसे कैसे प्रदर्शित करें? टैग में, या बस {{smthing}} की तरह ?? – Alan

+2

यदि आप अपनी छवि को बेस 64 में एन्कोड करते हैं तो यह आपको एक स्ट्रिंग वापस कर देगा। तो आपको बस कुछ लिखना होगा जैसे '' आप और अधिक सीख सकते हैं [यहां] (http://www.websiteoptimization.com/speed/tweak/inline-images/)। – naurel

उत्तर

2

छवि दिखाने के लिए 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" /> 

अब प्रत्येक के लिए कोणीय का उपयोग गतिशील रूप से डाउनलोड लिंक उत्पन्न करने के लिए इसका मतलब है इमेजिस।

+0

हाँ, मैंने इसे पहले ही समझ लिया है, और इस तरह से तैयार किया गया है। मैं बस सोच रहा था कि इस विधि के पूर्ण अनुरोध यूआरएल प्राप्त करने के लिए कोई और तरीका है .. यह मुझे संतुष्ट नहीं करता है। – Alan

संबंधित मुद्दे