Images with Uri from the React Native API

Asked

Viewed 43 times

1

In the database I save the image path along with the other posting information, ai on the page I want the image to appear I use a flatlist listing the posts and showing your image if that post has:

Flatlist showing the posts you have in the database

<FlatList
      data={postList}
      keyExtractor={item => item.id.toString()}
        renderItem={({item}) => {
          return(
            
            
            
            <View style={styles.postagemRed}>
              
                <View style={styles.postCima}>
                  

                  <Text style={styles.iconPost}></Text>
                  <View style={styles.separador}>
                    <View style={styles.nomeDate}>
                      <Text style={styles.postText}>{item.nome}</Text>
                      <Text style={[styles.postText, styles.dateText]}>
                        { // tratamento da variável de data
                          item.data.substring(8,10)+'/'+ // dia
                          item.data.substring(5,7) +'/'+ // mes
                          item.data.substring(0,4)       // ano
                        }   
                      </Text>
                    </View>
                    <View>
                      <Text style={[styles.postText, styles.cargoText]} >{item.identificacao}</Text>
                    </View>
                  </View>
                </View>
              
                
                
                
                {item.nomeImage &&

                    //por algum motivo a imagem não aparece
                    <Image style={styles.imagePost}  source={{uri : item.path}} />
                  }
                  
                  
                  


                <TouchableHighlight style={styles.postBaixo}
                underlayColor='#FFFFFF00'
                onPress={() => navigation.navigate('OpenPost', {idPost : item.id })}>
                  <View>


                    <Text numberOfLines={2} ellipsizeMode={'tail'} style={styles.tituloText}>{item.titulo}</Text>
                    <Text style={[styles.tituloText, styles.temaTexto]} >{item.tema}</Text>
                  
    
                    <View style={styles.corpoPost}>
                      <Text numberOfLines={3} ellipsizeMode={'tail'} style={styles.postTexto}>
                      {item.texto}
                      </Text>
                    </View>              
                  </View>
                </TouchableHighlight>
              

          </View>


          );
        }}
        />

Part inside the flatlist that makes the comparison if the post has image and should show the image (but only the space of the image appears on the page with nothing)

{item.nomeImage &&
<Image style={styles.imagePost}  source={{uri : item.path}} />
}

if I give a console log in this "item.path" it returns the right image path and if I use a

{item.nomeImage &&
<Image style={styles.imagePost}  source={require("caminho que ta na variavel 'item.path'")} />
}

it shows the image

example of the value of the.path item:

../../img/postagemPhoto/postagemPicture1628191387071.jpg

Obs: how do I resize the original image to the size of this image tag, so this only shows the central part of the image.

api react-native path image uri

1 answer

0

Hello

I believe that the resizeMode solve your problem, the accepted options are: cover, contain, stretch, repeat, center.

The default value is: cover

Browser other questions tagged api react-native path image uri

You are not signed in. Login or sign up in order to post.