IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

React Discussion :

[React] Charger une image


Sujet :

React

  1. #1
    Membre du Club
    Homme Profil pro
    Assistant aux utilisateurs
    Inscrit en
    janvier 2018
    Messages
    276
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 25
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Assistant aux utilisateurs
    Secteur : Distribution

    Informations forums :
    Inscription : janvier 2018
    Messages : 276
    Points : 59
    Points
    59
    Par défaut [React] Charger une image
    Bonjour,

    Je ne parviens pas à charger mon image. Voici mon code ci-dessous :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
     
    // Helpers/filmsData.js
     
    export default data = [
        {
           id:181808,
           vote_average:22,
           title:"Economie-Gestion",
           poster_path:"../assets/favicon.png",
           original_title:"Réviser vos cours ici.",
           overview:"Cours d'économie et de gestion.",
           release_date:"1998-11-04"
        }
     ]
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
     
    // Components/Search.js
     
    import React from 'react'
    import { StyleSheet, View, TextInput, Button, Text , FlatList } from 'react-native'
    import films from '../Helpers/filmsData'
    import FilmItem from './FilmItem'
     
    class Search extends React.Component {
      _displayDetailForFilm = (idFilm) => {
        console.log("Display film with id " + idFilm)
        this.props.navigation.navigate("FilmDetail")
    }
     
      render() {
        console.log(this.props)
        const { film, displayDetailForFilm } = this.props
        return (
          <View style={styles.main_container}>
            <FlatList
                data={films}
                keyExtractor={(item) => item.id.toString()}
                //renderItem={({item}) => <FilmItem film={item}/>}
                renderItem={({item}) => <FilmItem film={item} displayDetailForFilm={this._displayDetailForFilm} />}
            />
            <TextInput style={styles.textinput} placeholder='Chercher...'/>
            <Button title='Rechercher' onPress={() => {}}/>
          </View>
        )
     }
    }
     
    const styles = StyleSheet.create({
      main_container: {
        flex: 1,
        marginTop: 50
      },
      textinput: {
        marginLeft: 5,
        marginRight: 5,
        height: 50,
        borderColor: '#000000',
        borderWidth: 1,
        paddingLeft: 5
      }
    })
     
    export default Search
    Et enfin le pseudo HTML dont j'ai oublié le nom :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
     
    // Components/FilmItem.js
     
    import React from 'react'
    import { StyleSheet, View, Text, Image } from 'react-native'
     
    class FilmItem extends React.Component {
      render() {
        console.log(this.props)
        const film = this.props.film
        return (
          <View style={styles.main_container}>
            <Image
              style={styles.image}
              source={{uri: "image"}}
            />
            <View style={styles.content_container}>
              <View style={styles.header_container}>
                <Text style={styles.title_text}>{film.title}</Text>
                <Text style={styles.vote_text}>{film.vote_average}</Text>
              </View>
              <View style={styles.description_container}>
                <Text style={styles.description_text} numberOfLines={6}>{film.overview}</Text>
              </View>
              <View style={styles.date_container}>
                <Text style={styles.date_text}>Né le{film.release_date}</Text>
              </View>
            </View>
          </View>
        )
      }
    }
     
    const styles = StyleSheet.create({
      main_container: {
        height: 190,
        flexDirection: 'row'
      },
      image: {
        width: 120,
        height: 180,
        margin: 5,
        backgroundColor: 'gray'
      },
      content_container: {
        flex: 1,
        margin: 5
      },
      header_container: {
        flex: 3,
        flexDirection: 'row'
      },
      title_text: {
        fontWeight: 'bold',
        fontSize: 20,
        flex: 1,
        flexWrap: 'wrap',
        paddingRight: 5
      },
      vote_text: {
        fontWeight: 'bold',
        fontSize: 26,
        color: '#666666'
      },
      description_container: {
        flex: 7
      },
      description_text: {
        fontStyle: 'italic',
        color: '#666666'
      },
      date_container: {
        flex: 1
      },
      date_text: {
        textAlign: 'right',
        fontSize: 14
      }
    })
     
    export default FilmItem
    Résultat visuel : (j'ai un bloc gris, en plus du texte qui ne s'affiche pas!)
    Nom : 177538252_263852458765626_7842737198571600582_n.jpg
Affichages : 54
Taille : 69,2 Ko
    Merci d'avance !

  2. #2
    Membre éprouvé
    Avatar de gwyohm
    Homme Profil pro
    Développeur informatique
    Inscrit en
    octobre 2007
    Messages
    901
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : octobre 2007
    Messages : 901
    Points : 1 291
    Points
    1 291
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <Image
              style={styles.image}
              source={{uri: "image"}}
            />
    l'URI de l'image c'est "image" ?
    on ne dit pas "ça ne marche pas" on dit "je suis incapable de faire fonctionner correctement les outils mis à ma disposition"
    Pas de question technique par MP

  3. #3
    Membre du Club
    Homme Profil pro
    Assistant aux utilisateurs
    Inscrit en
    janvier 2018
    Messages
    276
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 25
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Assistant aux utilisateurs
    Secteur : Distribution

    Informations forums :
    Inscription : janvier 2018
    Messages : 276
    Points : 59
    Points
    59
    Par défaut
    Merci pour ton retour. J'aimerai que l’URL soit la variable "poster_path" de la liste qui est chargée. merci

Discussions similaires

  1. charger une image avec Jframe
    Par Battosaiii dans le forum Agents de placement/Fenêtres
    Réponses: 10
    Dernier message: 15/12/2005, 15h35
  2. Charger une image dans un thread
    Par KRis dans le forum Langage
    Réponses: 3
    Dernier message: 25/08/2005, 17h36
  3. Charger une image
    Par Andy_24DB dans le forum Java ME
    Réponses: 1
    Dernier message: 30/06/2005, 22h56
  4. [Image]comment pre-charger une image
    Par al85 dans le forum 2D
    Réponses: 5
    Dernier message: 28/02/2005, 20h22
  5. Réponses: 13
    Dernier message: 19/11/2004, 18h11

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo