Ne peut pas afficher l'Image à Réagir Natif

Je suis l'aide de réagir indigènes 0.28.0

J'essaie de montrer une image sur simulateur d'iPhone, selon ce tutoriel: http://www.appcoda.com/react-native-introduction/

var styles = StyleSheet.create({
image: {
    width: 107,
    height: 165,
    padding: 10
  }
}

var imageURI = 'http://books.google.com/books/content?id=PCDengEACAAJ&printsec=frontcover&img=1&zoom=1&source=gbs_api'

Puis dans le render() fonction, j'ajoute ceci:

<Image style={styles.image} source={{uri:imageURI}} />

De l'espace alloué pour l'image est là, mais l'image n'est pas affichée.

OriginalL'auteur Fredric Sanjaya | 2016-06-30

  1. 26

    Espère que les solutions suivantes peuvent vous aider - tout peut être utilisé pour l'Image

    1. HTTPS-Solution:

    1. Votre image est fournie par une URI - source={{uri:imageURI}}
    2. Exemple: source={{uri: 'https://i.vimeocdn.com/portrait/58832_300x300.jpg'}}
    3. Important: Ne pas oublier de mettre le clip en deux fois: {{}}

    2. HTTP-Solution:

    1. Si vous souhaitez http chercher la solution suivante - HTTP Github problème
    2. La solution: - HTTP-Solution

    3. Local-Image

    1. Enregistrer: Créer un nouveau dossier pour vos images et de les enregistrer localement (dossier: les images)
    2. Besoin: Besoin de l'image que vous avez enregistré localement par le biais de l'entre syntaxe

    var yourPicture = require ('./images/picture.jpg');

    • Notation pour le même dossier ('./')
    • Notation pour le dossier ci-dessus ('../')
    • Notation pour plus de dossier ci-dessus ('../../../')
    1. Utilisation: Utiliser votre image dans la fonction rendu
    render(){
    return(
        <Image source={yourPicture}/>
    )
}

    Le style de vos images fonctionne comme vous l'avez décrit

    Oui, je n'ai mis imageURI et utilisé le double accolade {{}} (révision de la question), Mais l'image n'est pas affichée.
    Si il n'y a pas plus de solution jusqu'à demain, je vais chercher de nouveau. Mais je pensais que cela aurait été la solution, je vais le tester et donner de la rétroaction à vous.
    La deuxième solution fonctionne. Merci! La première solution (prise en photo par une URI) ne fonctionne pas.
    Hey 🙂 je suis ravie de la 2ème solution qui fonctionne pour vous. J'ai testé le 1. solution et il fonctionne très bien à mon application. 2 choses que vous pourriez vérifier si u veux l'utiliser: 1. Assurez-vous que la connexion internet est disponible. 2. Complètement supprimer l'application de votre appareil et de le redémarrer - c'est peut-être un problème de cache.
    Merci pour la suggestion. J'ai fait comme vous l'avez suggéré, 1. L'internet est disponible. 2. Fait. Mais l'image n'apparaît pas. Est-il éventuellement une autorisation dans le projet Xcode pour afficher une image à partir d'internet?

    OriginalL'auteur Jonathan Stellwag

  2. 14

    En plus de Jonathan Stellwag réponse, la 1ère solution ne fonctionne que si l'URI est l'aide de https, ou par la définition de l'Application de la Sécurité des Transports.

    Voir Ne peut pas afficher une Image par URI de Réagir Natif Simulateur iOS

    J'ai eu le même problème et l'ajout d'un " s " puis il a travaillé!

    OriginalL'auteur Fredric Sanjaya

  3. 8

    Lors de l'ajout de balise d'Image et l'utilisation uri vous avez besoin de vérifier les choses suivantes:

    • L'ajout de la largeur et de la hauteur du style pour la balise d'Image:

      ex:

      <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
      style={{width: 400, height: 400}} />

      Image doc

    • En utilisant les url HTTP: vous devez activer l'application de la sécurité des transports

      App de la sécurité des transports pour iOS

    • En utilisant des url HTTPS: il fonctionnera normalement

    OriginalL'auteur Belal mazlom

  4. 5

    À quelqu'un arriver ici, si l'on a accepté la réponse ne fonctionnent pas pour vous, assurez-vous que votre image ait son propre style. Pour uri images importées, vous aurez besoin de définir à la fois la hauteur et la largeur.

    OriginalL'auteur Lucas Bernardo

  5. -1

    Ma question était dans le chemin. react-native-fs retourne chemin comme /storage/emulated/0/Android/data/com.blah/blah.jpeg mais Image composants nécessite d'être file:///storage/emulated/0/Android/data/com.blah/blah.jpeg

    OriginalL'auteur stakantin