Estou com um projeto e nele eu faço upload de imagem com expresse + multer no backend, durante o projeto tem uma parte que mostra essa foto, porem ela não aparece, apenas fica um espaço em branco onde ela deveria estar.
na pagina em questão eu chamo a api pra ela me retornar dados e no meio desses dados vem o caminho da imagem, em seguida guardo esses dados em uma variável useState, crio um flatlist e alimento ele com essa variável, esse flatlist lista postagens, como um instagram, com algumas informações e uma imagem, porém algumas das postagem podem n ter foto então faço um comparação para ver se tem imagem na postagem e so se tiver eu tento mostrar a sua imagem
Chamando a api e guardando os dados em uma variável
...
Axios.get(apiPath+'/api/showPost').then((response) => {
setPostList(response.data); // colocar o json q o backend devolveu na variável postList
Flatlist
<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.path &&
//por algum motivo a imagem não aparece // assim funciona source={require("../../img/postagemPhoto/postagemPicture1633288577901.jpg")}
<View>
<Text style={styles.tituloText}>{item.path}</Text>
<Image style={styles.imagePost} source={{uri : item.path}} />
</View>
}
<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>
);
}}
/>
Comparação se a postagem tem foto e tentando mostrar a foto
{item.path &&
//por algum motivo a imagem não aparece // assim funciona source={require("../../img/postagemPhoto/postagemPicture1633288577901.jpg")}
<View>
<Text style={styles.tituloText}>{item.path}</Text> //isso é pra ver se o caminho ta chegando certo
<Image style={styles.imagePost} source={{uri : item.path}} />
</View>
}
o caminho esta chegando certo e se eu colocar ele direto ele funciona, porem como vão ficar adicionando postagem durante o uso fica inviável colocar cada foto diretamente OBS: todo o código esta apenas na minha maquina e uso expo no meu próprio celular para "testar" o app
OBS²: a foto deveria aparecer entre o caminho q esta como texto e o porfavor