[React] Charger une image

Bonjour,

Je ne parviens pas à charger mon image. Voici mon code ci-dessous :

Code:

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:

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:

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!)
Pièce jointe 596650
Merci d'avance !