1
votes

Comment accéder à une image locale en utilisant une URL d'image locale dans un fichier json dans React Native?

J'ai un problème pour accéder à l'url de l'image locale dans un fichier json. Les images sont stockées dans le répertoire d'images. J'ai des adresses d'image stockées dans un tableau JSON comme ceci:

[ {"id": "1", "myImage": "require('./image/img1.png')", "myText": "Anytext"},

â€¦
]

Mais quand j'essaye d'appeler cela en utilisant first.myImage dans Image, cela ne fonctionne pas; Je peux obtenir tout le reste. Donc, j'essaye de l'appeler comme:

source={require('{first.myImage}')} as well as source={require({first.myImage})}

Mais ça dit, type de prop invalide. Je peux accéder à tous les autres éléments. J'ai également mis à jour le JSON comme suit:

jsonResponse=
[ {"id": "1", "myImage": "./image/img1.png", "myText": "Anytext"},

â€¦
]

const first = jsonResponse[0]

source = {first.myImage} OR source = {{first.myImage}}

mais cela donne aussi la même erreur. S'il vous plaît, aidez-moi.

reactjs react-native

0 commentaires

3 Réponses :

1
votes

assurez-vous que vous accédez à l'image dans le même répertoire où se trouve l'image ou accédez à l'image avec le chemin approprié

0 commentaires

1
votes

Je suppose que vous êtes en mesure de récupérer le chemin du fichier à partir du fichier json et que le chemin est correct. Sur cette base, essayez d'utiliser:

import image from first.myImage;

Ensuite, sur votre application, créez deux const pour contenir vos variables. Le premier que vous utiliserez pour enregistrer le chemin que vous récupérez du fichier json. Le second sera celui que vous utiliserez comme source de votre composant Image.

constructor() {
  const imagePath = first.myImage;
  const image = require(imagePath);
}

...

<Image 
   source={image}
   style={{ height: 30, width: 30, resizeMode: 'contain' }}
/>

...

Vous pouvez également essayer d'importer l'image de cette façon:

jsonResponse = [{"id": "1", "myImage": "./image/img1.png", "myText": "Anytext"}, ...]

0 commentaires

0
votes

JSON File:

{
    "id": 2,
    "name": "Toyota Corolla XLI\\Hatchback Automatic",
    "details": "4 seater, diesel",
    "picture": "./static/images/XLI.jpg",
    "overcharge": "PKR 179 per excess km",
    "weekday": "PKR 190/hr",
    "weekend": "PKR 287/hr"
  },
  
  And then add inyour .js file like this:
  
{PostData.map((postDetail, index) => {
                return (
                  <Link href="details">
                    <Card className="carditem">
                      <Card.Body style={{ cursor: "pointer" }}>
                        <Row>
                          <Col xs="12" sm="4">
                            <img
                              src={postDetail.picture}
                              class="d-block"
                              height="170"
                            />

0 commentaires