Flutter does not return images from api

Asked

Viewed 455 times

2

I’m trying to get the images from mongodb database, via api I did in nodejs, but it doesn’t work at all, and still presents this error here. 

Invalid argument(s): No host specified in URI file:///1573130697077_login_enabled.PNG

When the exception was thrown, this was the stack
#0      _HttpClient._openUrl  (dart:_http/http_impl.dart:2191:9)
#1      _HttpClient.getUrl  (dart:_http/http_impl.dart:2122:48)
#2      NetworkImage._loadAsync 
package:flutter/…/painting/_network_image_io.dart:84
<asynchronous suspension>
#3      NetworkImage.load 
package:flutter/…/painting/_network_image_io.dart:47
...
Image provider: NetworkImage("1573130697077_login_enabled.PNG", scale: 1.0)
Image key: NetworkImage("1573130697077_login_enabled.PNG", scale: 1.0)

From all the research I’ve done, I realized that I’m just taking the picture, instead of taking her address. I tried to pass this address in several ways, but I still couldn’t.

I’ll be running down all the codes involved:

no Node is like this: 

var date = new Date();
    time_stamp = date.getTime();


    var url_imagem = time_stamp + '_' + req.files.caminho_foto.originalFilename;

    var path_origem = req.files.caminho_foto.path;
    var path_destino = './images/' + url_imagem;

    fs.rename(path_origem, path_destino, function(err){
        if(err){
            res.status(500).json({error: err});
            return;
        }

    async function salvaMedico(){
        const medicos = new Medicos({
            nome: req.body.nome,
            formacao: req.body.formacao,
            crm: req.body.crm,
            cidade: req.body.cidade,
            caminho_foto: url_imagem
            //data_atualizacao: null
            });

and on the flutter

Container(
                    margin: new EdgeInsets.symmetric(vertical: 16.0),
                    alignment: FractionalOffset.centerLeft,
                    child: new Container(
                      height: 50,
                      width: 50,
                      child: Image.network(
                        snapshot?.data[index]?.caminhoFoto ?? '',
                        fit: BoxFit.cover
                      ),

This last code is inside a Listview that is inside a Futurebuilder.

Does anyone have any idea how I can fix this?

node.js mongodb mongoose flutter dart

  • No host specified I think you need a hostname and probably password to work. I made a json API and tried to pull by nodejs, and presented this same error

  • Consumes your API by some other client (browser, Postman, etc). Take the URL it returns and try to access, if it doesn’t work like this, the problem is not of flutter.

  • @Juliohenriquebitencourt in both Postman and browser returns the data

  • @riki481 as it managed to solve?

  • returns the data, but what data returns exactly? You can take this URL and access it through the browser?

  • 1

    @Juliohenriquebitencourt returns in JSON format

  • @Localizamed you do not need to undo the changes made by someone in your question, if I modified it is to make it cleaner.

  • Could you use a print to show what returns from the snapshot.data[]. pathFoto ? I also need to know what you call the webservice and what it returns in the attribute 'wayFoto'

  • @Localizamed I know it obviously returns a JSON... What I asked you was the exact value returned in the field, and if you copy that URL (which I assume is a URL in a valid format that your API is returning), you can paste it into the browser and access that image.

  • @Localizamed this is the problem, I could not solve

Show 5 more comments

1 answer

1


According to the error you made available, you are trying to access an image that does not exist on your device.

Invalid argument(s): No host specified in URI file://1573130697077_login_enabled.PNG

Using only the name of your image, your server can access it because both are in the same place, already your mobile no.

So to open the image that is in your BD, by your mobile phone, first you will have to download it on your mobile, below follows a way to do:

EXAMPLE

On your server (I will use Express)

Create a dowload route

app.get('/download', function(req, res){
  const file = `${__dirname}/imagens/sua_image.png`;
  res.download(file);
});

Sources: Express; Stackoverflowen

In its application

Create a method that will access your new route and download the image using package.

Package command used to download the image:

await ImageDownloader.downloadImage(url);

Sources: Stackoverflowen

After having the image downloaded, use its path to display in your widget.

~~ I did not perform tests with the examples, I am without Flutter and Nodejs at the moment ~~

  • 1

    worked. I just needed to create a new route to grab the images. Thank you ^^

Browser other questions tagged node.js mongodb mongoose flutter dart

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