Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Fetch imagem da API com autenticação - Reac-Native + Expo

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.

2 respostas

Fala Gabriel, tudo bem ?

Cara vi que sua dúvida é um pouco antiga, queria saber se já conseguiu resolve-la?

Cara senão me engano tem um componente no react native que já exibe a imagem de uma vez.

solução!

Fala Matheus, tudo certo e com você?

Consegui! Acabei esquecendo do meu post aqui e vou aproveitar e postar a solução.

Por algum motivo, o component Image do react, mesmo permitindo enviar headers na requisição da imagem, não funcionava corretamente, o motivo eu não entendi muito bem ainda, mas parece estar relacionado ao tipo de dado que o servidor envia, um Blob.

Para contornar isso, existe uma api no Expo chamada FileSystem que fornece opções para lidar com arquivos Blob no react de forma menos trabalhosa!