React Native Image uri ne fonctionne pas

J'ai essayé d'afficher une image à partir d'un fichier local, alors j'essaie de le faireReact Native Image uri ne fonctionne pas

<Image 
    source={{uri:'../../assets/img_src/BTI.jpg'}} 
    style={{height:150,width:150}} 
/>

mon composant conteneur semble obtenir la hauteur et la largeur, mais l'image n » t charge. Alors je tente cette

<Image 
    source={require('../../assets/img_src/BTI.jpg')} 
    style={{height:150,width:150}} 
/>

Il fonctionne très bien, malheureusement pour autant que je sais que je ne peux pas utiliser cette implémentation si je veux manipuler le fichier d'adresses d'abord et le stocker à une variable. Exemple:

const imgSrc = `../../assets/${data.image}`;

où la data.image = 'img_src/BTI.jpg. J'essaie de supprimer toutes les données sur mon simulateur android dans le studio Android, mais le résultat est toujours le même. Est-ce que je fais quelque chose de mal? Y a-t-il une meilleure mise en œuvre pour cela?

Merci beaucoup :)

Source

2017-03-27 Irvan

Vous voulez dire que vous ne pouvez pas utiliser source = {require (imgSrc)}? – Hariks

Cela semble se produire parce que vous essayez d'inclure un actif en utilisant un nom de variable comme source. La réponse acceptée ici donne un aperçu de pourquoi cela ne fonctionne pas: http://stackoverflow.com/questions/30854232/react-native-image-require-module-using-dynamic-names#30868078 – QMFNP

@Hariks ouais, un message d'erreur apparaîtra – Irvan

Ne pas être en mesure de require() un chemin dynamique est un comportement prévu REACT autochtone, l'emballeur a besoin de connaître les chemins à l'avance - voir React Native issues

Nous avons eu ce problème dans notre projet, nous stockions des URL d'images sur notre base de données et voulions concaténer des chaînes dans l'application pour obtenir le chemin vers l'image stockée localement. Comme vous l'avez découvert, cela ne fonctionne pas. Vous pourriez trouver notre solution de contournement utile.

Dans notre dossier /images, nous avons créé un nouveau fichier images.js qui simplement exporté un objet dont les clés mis en correspondance avec tous nos chemins d'image locaux comme si

export const Images = { 
    image1: require('./image1.png'), 
    image2: require('./image2.png'), 
    image3: require('./image3.png'), 
    };

Maintenant, l'emballeur connaissait tous les chemins à l'avance et était heureux . Ensuite, nous avons ajouté un imageKey à l'élément DB et l'avons utilisé plutôt que le chemin absolu. Pour saisir une image que nous avons fait tout simplement

import { Images } from '../images/images'; 
// get your image key e.g. passed down through props 
const img = Images[imageKey]; 

... 
render() { 
    ... 
    <Image source={img} /> 
    ... 
}

ne rentrera pas votre cas précis d'utilisation, mais nous espérons que vous pourriez être en mesure de faire un peu d'usage.

Source

2017-03-27 19:50:38 drjimmie1976

Une approche similaire a travaillé pour moi aussi. – milkersarac

React Native Image uri ne fonctionne pas

Répondre

Questions connexes