images won't appears using imageBackground in react-native

161 Views Asked by At

I would like to dynamically make an image appear on a "ImageBackground".

I have a JSON data file which it contains all the paths of the images.

I use a flatlist to use all the data from the data file and I use a custom component to format my visualization (integrated as item on the flatist).

My problem is that my images do not appears when I use the data from the JSON file, but when I use a static path, it's all ok.

What am I doing wrong? When I console.log my item.poster_path are correctly posted. It's probably something I don't do correctly on the

source={{uri: item.poster_path}} 

but I haven't found it by myself

// Helpers/filmsData.js

export default data = [
   {
      id: 1,
      {...}
      poster_path: "../Images/photo1.jpg",
   },
   {
      id: 181809,
      {...}
      poster_path: "../Images/photo2.jpg",
      {...}
   }
]

// custom component Item import React from 'react'; import { StyleSheet, Text, View, ImageBackground, Image, TouchableOpacity } from 'react-native';

class test extends React.Component {

     render() {

         return (
             <TouchableOpacity
                 style={styles.item_content}
                 onPress={() => {(...)}}>

                 <ImageBackground
                     // source={require('../Images/photo1.jpg')} => Working OK
                     source={{uri: item.poster_path }} => Not Working
                     style={styles.ImageBackground}>
                     <View
                        {...}
                 
                     </View>

            </ImageBackground>

        </TouchableOpacity>

    );
}
}

const styles = StyleSheet.create({
    event_content: {
        height: 120,
        margin: 1
    },
     ImageBackground: {
         width: '100%',
         height: '100%'
    }
    })

 export default test
0

There are 0 best solutions below