L'immagine del profilo Facebook non viene visualizzata con <Image>

Ho ottenuto un'app in cui devo mostrare un'immagine del profilo utente.L'immagine del profilo Facebook non viene visualizzata con <Image>

Alcuni utenti hanno effettuato l'accesso da Facebook, quindi stiamo salvando l'immagine del profilo di Facebook e quando provo a visualizzare l'immagine con il componente React Native Image, l'immagine non viene visualizzata.

Quello che ho ottenuto:

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

E stili:

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

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

Non so se il problema è che questa immagine Facebook URL non ha l'estensione dell'immagine.

Qualsiasi aiuto è benvenuto.

Grazie :)

fonte

2016-01-28 JV Lobo

Anche se la L'URL non punta direttamente a un file immagine, c'è ancora un'immagine lì da qualche parte. Utilizza qualcosa come gli strumenti di sviluppo di Google Chrome per eseguire la scansione dell'attività di rete quando viene caricata un'immagine di Facebook per vedere da dove proviene realmente. –

Ok, grazie. Quindi, perché pensi che l'immagine non venga visualizzata nella mia app React Native? –

Penso che sia un problema di origine. Vorrei provare a scrivere una funzione che, data "http://graph.facebook.com/{userID}/picture?type=small", troverà la corretta posizione del file immagine e la passerà come sorgente dell'immagine. –

Sembra che è necessario rimuovere una serie di citazioni dalla stringa uri.

fonte

2016-01-28 20:07:52 createbang

Grazie per la tua risposta createbang, ma se rimuovo un set di virgolette, ottengo un errore di sintassi! :/ –

È strano. Ho copiato il tuo codice e l'ho eseguito localmente e ha funzionato solo con un singolo set di virgolette. Hai provato a eseguire il codice con il set di 'uri' su qualcosa di diverso da un'immagine di Facebook (qualcosa che sai per certo è pubblico e funzionerà)? Ad esempio, 'https: // www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png' – createbang

Siamo spiacenti! Ho avuto una confusione tra virgolette e parentesi graffe !! Ho modificato il mio post principale, quelle citazioni extra sono state un errore copiando il codice in Stackoverflow. Nel mio codice non ci sono citazioni aggiuntive. Grazie! –

Penso che il problema risieda nella redirezione di URL delle immagini. Se aggiungi il numero &redirect=false alla fine dell'URL e utilizzi i campi dell'URL nell'oggetto dati mostrato, l'immagine dovrebbe essere visualizzata correttamente.

Non conosco il motivo principale per questo, ma questa soluzione alternativa dovrebbe essere d'aiuto, anche se significa scrivere più codice.

fonte

2016-10-29 21:35:35 user1875631

Il problema è che l'url del grafico di Facebook non è l'url effettivo in cui è memorizzata l'immagine. È un reindirizzamento. Esiste un problema sul github nativo reattivo che sta monitorando un problema simile (reindirizzamento 301). Sembra che sia parzialmente risolto (funziona per 301 su iOS).

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

Alcuni dettagli su questo, se siete curiosi:

Facebook ti dà l'url grafico, ma in realtà memorizza l'immagine altrove su un CDN. Ciò consente a Facebook di spostare le risorse senza interrompere l'url del grafico di Facebook che documentano. L'url del grafico verrà reindirizzato all'URL effettivo, il che significa che l'url del grafico restituisce un 302 (reindirizzamento non permanente).

Per esempio, attualmente il mio profilo pic sarebbe interrogato utilizzando questo URL:

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

Ma favore (attualmente) di questa posizione attuale:

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

fonte

2017-02-19 20:58:49

L'immagine del profilo Facebook non viene visualizzata con <Image>

risposta

Problemi correlati