2016-01-28 4 views
5

के साथ प्रदर्शित नहीं होती है मुझे एक ऐप मिला जहां मुझे उपयोगकर्ता प्रोफ़ाइल छवि दिखाना है।फेसबुक प्रोफाइल छवि <Image>

कुछ उपयोगकर्ताओं को फेसबुक से प्रवेश किया हुआ है, तो हम उनके फेसबुक प्रोफाइल छवि बचत कर रहे हैं और जब मैं इस छवि को प्रतिक्रिया मूल निवासी छवि घटक के साथ प्रस्तुत करने के लिए प्रयास करते हैं, छवि प्रदर्शित नहीं है।

मुझे क्या मिला:

<Image style={ styles.userImage } source={{uri: "http://graph.facebook.com/{userID}/picture?type=small" }} /> 

और शैलियों:

userInfoContainer: { 
    flex: 1, 
    alignItems: 'center', 
    paddingTop: 30, 
    paddingBottom: 30, 
    borderBottomWidth: 1, 
    borderBottomColor: '#e5e5e5', 
    backgroundColor: '#ffffff', 
}, 

userImage: { 
    height: 100, 
    width: 100, 
    borderRadius: 50, 
    marginBottom: 20, 
}, 

मैं अगर समस्या यह है कि इस फेसबुक चित्र URL छवि एक्सटेंशन नहीं है पता नहीं है।

किसी भी मदद का स्वागत है।

धन्यवाद :)

+0

यहां तक ​​कि अगर यूआरएल सीधे एक छवि फ़ाइल को इंगित नहीं करता है, वहां कहीं भी एक छवि है। Google Chrome के डेवलपर टूल जैसे नेटवर्क गतिविधि को स्कैन करने के लिए कुछ उपयोग करें, जब एक फेसबुक छवि लोड हो जाती है यह देखने के लिए कि यह वास्तव में कहां से आ रहा है। –

+0

ठीक है, धन्यवाद। तो, आपको क्यों लगता है कि छवि मेरे प्रतिक्रिया मूल ऐप में प्रदर्शित नहीं होती है? –

+0

मुझे लगता है कि यह एक स्रोत मुद्दा है। मैं एक फ़ंक्शन लिखने का प्रयास करूंगा जो "http://graph.facebook.com/{userID}/picture?type=small" को छवि फ़ाइल का उचित स्थान मिलेगा और उसे छवि स्रोत के रूप में पास करेगा। –

उत्तर

1

लगता है कि आपने uri स्ट्रिंग से बोलियां के एक सेट को दूर करने के लिए है।

+0

के साथ संपादित किया है आपके उत्तर createbang के लिए धन्यवाद, लेकिन अगर मैं उद्धरण के एक सेट को हटा देता हूं, तो मुझे एक वाक्यविन्यास त्रुटि मिलती है! :/ –

+0

यह अजीब बात है। मैंने आपका कोड कॉपी किया और इसे स्थानीय रूप से चलाया और यह केवल उद्धरण के एक सेट के साथ काम किया। क्या आपने फेसबुक छवि के अलावा कुछ अन्य चीज़ों के साथ 'यूरी' सेट के साथ कोड चलाने की कोशिश की है (जो कुछ आप जानते हैं वह सार्वजनिक है और काम करेगा)? उदाहरण के लिए, 'https: // www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png' – createbang

+0

क्षमा करें! मुझे उद्धरण और घुंघराले ब्रैकेट के बीच भ्रम था !! मैंने अपना मुख्य पोस्ट संपादित किया है, उन अतिरिक्त उद्धरणों को कोड को स्टैक ओवरफ्लो में कॉपी करने की गलती थी। मेरे कोड में कोई अतिरिक्त उद्धरण नहीं है। धन्यवाद! –

1

मुझे लगता है कि समस्या यूआरएल रीडायरेक्शन में निहित है। यदि आप अपने यूआरएल के अंत में &redirect=false जोड़ते हैं और आप दिखाए गए डेटा ऑब्जेक्ट में यूआरएल फ़ील्ड का उपयोग करते हैं, तो छवि ठीक से दिखानी चाहिए।

मुझे इसके लिए मुख्य कारण नहीं पता है, लेकिन इस कामकाज की मदद करनी चाहिए, भले ही इसका मतलब अधिक कोड लिखना है।

4

मुद्दा यह है कि फेसबुक ग्राफ़ यूआरएल उस छवि के लिए वास्तविक यूआरएल नहीं है जहां वह छवि संग्रहीत की जाती है। यह एक रीडायरेक्ट है। प्रतिक्रिया-मूल गीथब पर एक मुद्दा है जो एक समान समस्या (301 रीडायरेक्ट) को ट्रैक कर रहा है। ऐसा लगता है कि यह आंशिक रूप से हल हो गया है (आईओएस पर 301 के लिए काम कर रहा है)।

https://github.com/facebook/react-native/issues/4940

इस बारे में कुछ और जानकारी है, तो आप उत्सुक हैं:

फेसबुक आप ग्राफ यूआरएल देता है, लेकिन वास्तव में एक cdn पर कहीं और छवि संग्रहीत करता है। यह फेसबुक को फेसबुक ग्राफ़ यूआरएल को तोड़ने के बिना संपत्तियों को स्थानांतरित करने देता है। ग्राफ़ यूआरएल वास्तविक यूआरएल पर रीडायरेक्ट करेगा, जिसका अर्थ है कि ग्राफ यूआरएल 302 (गैर-स्थायी रीडायरेक्ट) देता है।

उदाहरण के लिए, वर्तमान में मेरे प्रोफ़ाइल फ़ोटो इस यूआरएल का उपयोग कर पूछे की जाएगी:

https://graph.facebook.com/207537292916369/picture?type=large

लेकिन यह (वर्तमान में) इस वास्तविक स्थान पर रीडायरेक्ट करेगा:

https://scontent.xx.fbcdn.net/v/t1.0-1/p200x200/15940479_407531822916914_4834858285678282755_n.jpg?oh=a49a86e0e8042e3df27ce3dfe871b958&oe=59327225

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