2016-10-31 1 views
1

Dans mon dossier de projet React Native, j'ai les fichiers src qui contiennent les composants, ainsi que certaines images que je veux utiliser sur iOS et Android. Si j'utilise ceci:Accès aux images statiques/locales dans React Native

<Image style={{ width: 200, height: 200 }} source={require('../images/camera.png')} /> 

alors l'image se charge parfaitement. Cependant, la source dans la balise d'image va être créée dynamiquement lorsque l'utilisateur prend une photo. Ce code:

<Image style={{ width: 200, height: 200 }} source={{ uri: '../images/camera.png' }} /> 

ne fonctionne pas. Aucune erreur n'a été levée, mais aucune image n'a été affichée. Je suis sûr que je suis sur la bonne voie car il va retourner les images prises par l'appareil photo et stockées sur l'appareil en utilisant le même code lorsque je remplace la source avec un accessoire (<Image style={{ width: 200, height: 200 }} source={{ uri: this.props.image }} />) mais pour l'image statique ça ne se passe pas. Suggestions?

Répondre

1

Pour les images statiques, vous devez spécifier comme ci-dessous source

source={require('static_image_path_relative_current_directory') 

uniquement pour les fichiers distants et locaux (non statique) nous devons spécifier uri dans source comme ci-dessous

source={{uri: 'https://facebook.github.io/react/img/logo_og.png'} 
+1

Nice - merci ! Je pensais qu'il pourrait y avoir un moyen d'utiliser l'URI pour le statique; sinon, je vais juste faire quelques modules différents pour le gérer à la place. –