Estou tentando buscar uma imagem na minha api em nodejs e setar ela no component Image.
Com algumas buscas achei a seguinte solução:
<Image
source={{
uri: "http://localhost:3000/1/pictures/${imageUrl}",
headers:{
Authorization: `Bearer ${token}`
}
}}
/>
Entretanto a requisição não é feita, não chega no backend e não tem resposta de nada.
Procurando um pouco mais a fundo encontrei a opção de usar o fetch e buscar a imagem.
Na minha api, a imagem é enviada da seguinte maneira:
async index(req,res){
const { id, img_url} = req.params;
//verificar antes se a imagem existe
const dir_path = `/uploads/${id}/${img_url}`;
res.status(200).sendFile(path.join(__dirname, '..', '..', dir_path));
E, fazendo o fetch no client em react-native, temos:
async function getImage(){
const imageUrl = "http://192.168.15.33:3000/1/pictures/${imageUrl}";
fetch(imageUrl, {
method: "GET",
headers: {
Authorization: 'Bearer ${token}'
}
})
.then((res) => res) //vem como blob, como usar??
.then((image) => {
})
.catch(e => {
console.log(e);
});
}
Aparentemente a resposta vem como um Blob e eu não consigo tratar esse Blob, como isso poderia ser feito??
Quando eu tento usar um Blob.text(), por exemplo, o react diz que não existe esse método. Ou até mesmo usar URL.createobjecturl(blob) não é permitido.