web-dev-qa-db-fra.com

Récupérer l'image de l'API

Q1) Dans mon application reactjs, j'essaye de récupérer une API depuis mon serveur Nodejs backend. L'API répond avec un fichier image sur demande.

Je peux accéder et voir le fichier image sur http://192.168.22.124:3000/source/592018124023PM-pexels-photo.jpg

Mais dans mon côté client reactjs, j'obtiens cette erreur dans le journal de la console.

SyntaxError non capturée (en promesse): jeton inattendu � dans JSON à la position 0

Réactions: 

let fetchURL = 'http://192.168.22.124:3000/source/';
  let image = name.map((picName) => {
    return picName
  })

  fetch(fetchURL + image)
  .then(response => response.json())
  .then(images => console.log(fetchURL + images));

Nodejs: 

app.get('/source/:fileid', (req, res) => {
const { fileid } = req.params;
res.sendFile(__dirname + /data/ + fileid); 
});

Y a-t-il une meilleure façon de faire que ce que je fais ci-dessus?

Q2) Aussi, comment puis-je attribuer une valeur à une variable vide (qui vit en dehors de la fonction d'extraction)
jpg = fetchURL + images; Je peux donc y accéder quelque part.

javascriptnode.jsreactjs
7
Ted Khi

La réponse du serveur est un fichier, pas un texte au format JSON. Vous devez modifier l'analyseur pour la réponse à Blob.

var outside

fetch(fetchURL + image)
  //                         vvvv
  .then(response => response.blob())
  .then(images => {
      // Then create a local URL for that image and print it 
      outside = URL.createObjectURL(images)
      console.log(outside)
  })
11
maxpaj