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!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software